1. 同乙個技術,都是react,或者都是vue。
2. 會webpack的dll配置。
發現各個應用之間,第三方的包都是很多的,假如我們在主應用把這些包抽取出來,後面子應用引入,可以極大地減少子應用包的大小。
一開始想使用externals來解決這問題,但是發現有一部分外掛程式是不支援umd格式的,所以廢棄了這個方案。
後面想到了webpack的dll打包,可以打包抽取不支援umd格式的外掛程式,完美的解決了問題。
直接上**
const path = require('path');
const webpack = require('webpack');
const = require('clean-webpack-plugin');
const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin;
const friendlyerrorsplugin = require('friendly-errors-webpack-plugin');
// rc-系列外掛程式
const rcs = ['rc-table', 'rc-select', 'rc-switch', 'rc-picker', 'rc-trigger', 'rc-tree-select', 'rc-menu', 'rc-field-form', 'rc-animate', 'rc-input-number', 'rc-tooltip', 'rc-virtual-list', 'rc-dialog', 'rc-pagination', 'rc-dropdown', 'rc-checkbox', 'rc-resize-observer']
module.exports = ,
output: ,
plugins: [
new cleanwebpackplugin(),
new webpack.dllplugin(),
new bundleanalyzerplugin(),
]}
1. 抽取了出來的rc.js中存在了react+react-dom+react-router-dom的**,所以我們引入的時候就可以忽略這個react.js。
2. 引入的時候需要注意順序,我是引入按照rc,xlsx,echarts,vendor順序來的。記得rc需要放在第一步。(這個跟先引入react想法一致。)
dll的基本配置,注意按照順序即可。(plugins是從後往前插入的,類似於遞迴,所以我們需要逆序)// 外掛程式
plugins: [
// 匯入'
...['vendor', 'echarts', 'xlsx', 'rc'].map(item => new webpack.dllreferenceplugin(-manifest.json`)
})),
...['vendor', 'echarts', 'xlsx', 'rc'].map(item => new addassethtmlwebpackplugin(.js`),
outputpath: 'static/dll',
publicpath: `$/static/dll`,
hash: true
}))].filter(boolean),
這裡其實只需要使用dllreferenceplugin就可以了,告訴webpack**,並且忽略打包即可。(記住這裡忽略了dll.react.js)// 外掛程式
plugins: [
// 匯入
...['vendor', 'echarts', 'xlsx', 'rc'].map(item => new webpack.dllreferenceplugin(-manifest.json`)
}))].filter(boolean),
這裡發現其實引用檔案的路徑是可以超出本專案的嗎,這裡就是跨專案了。
打包完即可上線
前端js效能優化(一)
多數瀏覽器使用單一程序來處理ui重新整理和js指令碼執行,因此同一時刻只能做一件事。因此,當頁面遇到script標籤後都會阻止頁面渲染過程並等待指令碼的解析和執行,無論指令碼是內嵌的還是外鏈的。由於每乙個script標籤都會阻塞頁面渲染,所以減少頁面包含的script標籤數量有助於改善這一狀況。這不...
web優化(一 前端)
當我們在瀏覽器位址列中輸入乙個url的時候,網頁開始請求,我們在頁面上看到的內容就是許多個http請求從伺服器返回的資料展示,這些展示的快慢很大程度依賴前端的優化,怎樣做好前端的優化,我這裡總結了幾點 一 減少http請求,重複使用link 1 合併css js檔案 2 background 使用乙...
微前端 跨域 做個微前端demo
之前已經分享過微前端,至於落地還是不落地就看公司和專案了,今天基於微前端做了個小demo,分享一下。可以去qiankun官網看看,包括微前端核心設計理念 為什麼不是ifram和快速上手及一些問題都很清楚。因為自己一直用的都是vue,所以基座和子應用都是用vue腳手架快速搭建,至於接入react和jq...