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想法一致。）
// 外掛程式
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),
// 外掛程式
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...