webpack 打包優化
2. router 按需載入
最後修改router.js,將所有路由都改為動態載入
//router.js
//原來的寫法：import Home from '@/components/PC/Home'
//改成下面這種形式（其他路由同理）
const Home = () => import('@/components/PC/Home')
複製程式碼
3.新增dll
新增webpack.dll.conf.js 檔案 Dll打包以後是獨立存在的，只要其包含的庫沒有增減、升級，hash也不會變化，因此線上的dll程式碼不需要隨著版本釋出頻繁更新。
App部分程式碼修改後，只需要編譯app部分的程式碼，dll部分，只要包含的庫沒有增減、升級，就不需要重新打包。這樣也大大提高了每次編譯的速度。
假設你有多個專案，使用了相同的一些依賴庫，它們就可以共用一個dll
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'none',
entry: {
vue: ['vue/dist/vue.js', 'vue', 'vue-router', 'vuex'],
comment: ['jquery', 'lodash', 'jquery/dist/jquery.js']
},
output: {
path: path.join(__dirname, '../static/dll/'),
filename: '[name].dll.js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../static/dll/', '[name]-manifest.json'),
name: '[name]'
})
],
optimization: {
minimizer: [
new UglifyJsPlugin()
]
}
};
複製程式碼
執行命令，生產dll json webpack --config config/webpack.dll.conf.js
util.js plugins 新增
new webpack.DllReferencePlugin({
manifest: require('../static/dll/vue-manifest.json')
}),
new webpack.DllReferencePlugin({
manifest: require('../static/dll/comment-manifest.json')
})
複製程式碼
index.html 新增檔案連線
<script src="/static/dll/vue.dll.js"></script> <script src="/static/dll/comment.dll.js"></script> 複製程式碼
4.新增SplitChunksPlugin
提取node_modules 初始化模組，並設定快取
optimization: {
splitChunks: {
chunks: 'all',
minChunks: 3,
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true
}
}
}
},
複製程式碼
5.提取css
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
複製程式碼
new MiniCssExtractPlugin({
filename: isBuild? 'css/[name].css':'css/[name]_[hash].css'
})
複製程式碼
5.提取element ui
element: {
test: /node_modules\/element-ui/,
chunks: 'initial',
name: 'element',
priority: 10,
enforce: true
},
複製程式碼
new HtmlWebpackPlugin({ template: './pages/index.html', chunks: ['vendor', 'app', 'element'] }) 複製程式碼
6.按需載入babel-polyfill
babel-polyfill的缺點 使用後打包後的體積很大，因為babel-polyfill是一個整體，把所有方法都加到原型鏈上。比如我們只使用了Array.from，但它把Object.defineProperty也給加上了，這就是一種浪費了。 使用@babel/runtime和@babel/plugin-transform-runtime 用外掛後，Babel就會使用babel@runtime下的工具函式，將Promise重寫成_Promise（只是打比方），然後引入_Promise helper函式。這樣就避免了重複打包程式碼和手動引入模組的痛苦。
.babel
"plugins": [ "@babel/plugin-transform-runtime" ] 複製程式碼
polyfills.js 刪除babel-polyfill
//import 'babel-polyfill'; //import "core-js/modules/es6.promise"; 複製程式碼
總結
app.js 1.78M -> 125k 體積減小 90%
vendor.js 324k -> 208k 體積減小 35%
由之前的3個包 拆分打包成多個 ，按需載入。
速度篇
building modules chunk asset optimization
之前是 60s-70s 體積優化後穩定在 40-50s（穩定在45s左右） 提升速度 20% 左右
1.使用 webpack-parallel-uglify-plugin 外掛來壓縮程式碼
當 Webpack 有多個 JavaScript 檔案需要輸出和壓縮時，原本會使用 UglifyJS 去一個個挨著壓縮再輸出， 但是 ParallelUglifyPlugin 則會開啟多個子程序，把對多個檔案的壓縮工作分配給多個子程序去完成
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
uglifyOptions: {
// 最緊湊的輸出
beautify: false,
// 刪除所有的註釋
comments: false,
compress: {
warnings: false, // 警告開關
drop_console: true,
// 內嵌定義了但是隻用到一次的變數
collapse_vars: true,
// 提取出出現多次但是沒有定義成變數去引用的靜態值
reduce_vars: true
}
},
sourceMap: false,
parallel: true , // 並行處理打包檔案
cache: true // 使用快取
})
複製程式碼
[34.463, 38.368, 37.928, 36.127, 38.007] 平均 36.9786 36s 縮短 新增後穩定在 30-40s 大約10s
2.用 Happypack 來加速程式碼構建
happypack把任務分解給多個子程序去併發的執行，子程序處理完後再把結果傳送給主程序
new HappyPack({
id: 'babel',
loaders: [
{
loader: 'babel-loader',
query: '?cacheDirectory',
options: {
presets: ['@babel/env']
}
}],
threadPool: happyThreadPool,
verbose: true
}),
複製程式碼
{
test: /\.js$/,
include: [srcPath, iqiyiPath],
exclude: /(node_modules|bower_components)/,
loader: 'happypack/loader?id=babel'
},
複製程式碼
[35.357, 37.762, 44.798, 33.635, 33.427, 33.473, 32.468] 均值 35.845
new HappyPack({
id: 'vue-loader',
loaders: ['vue-loader'],
threadPool: happyThreadPool,
verbose: true
})
複製程式碼
{
test: /\.vue$/,
include: srcPath,
loader: 'happypack/loader?id=vue-loader'
},
複製程式碼
[37.683, 39.648, 35.499, 35.108, 37.419, 35.862] 均值 36.869
new HappyPack({
id: 'css-loader',
loaders: ['css-loader'],
threadPool: happyThreadPool,
verbose: true
})
複製程式碼
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
//'css-loader'
'happypack/loader?id=css-loader'
]
}
複製程式碼
[ 39.394, 39.443, 35.080, 37.253 ,37.501, 35.632] 均值 37.383
[35.639, 36.382, 34.144, 33.420, 34.641, 32.504, 34.313] 34.434 速度穩定在30-35之間，縮短大約 1-2s
3.新增babel cacheDirectory
4.devtool
devtool: 'source-map' 構建速度: 25.133, 26.545, 25.956, 24.763, 26.953 ~ 25.869 重新構建速度: 1.387, 1.632 ,1.872, 1.809, 0.932 ~ 1.526
| devtool | 構建速度 | 重新構建速度 | 生產環境 | 品質(quality) |
|---|---|---|---|---|
| eval | 21.473 +++ | 0.6822 +++ | no | 生成後的程式碼 |
| cheap-eval-source-map | 23.251 + | 0.8622 ++ | no | 轉換過的程式碼（僅限行） |
| cheap-module-eval-source-map | 24.9536 o | 1.124 ++ | no | 原始原始碼（僅限行） |
| eval-source-map | 24.161 -- | 0.9534 + | no | 原始原始碼 |
總結
最終打包速度從 60-70 降低到 30-35s 降低大約 20-25s 左右 提升速度大約 30% 左右 開發速度 二次打包速度 從 2.7~2.9s 左右降低到 0.6～0.9s,大約提速2s ,提速 60%-70% 左右 devtoo：eval
左右降低到 0.8～1.3s, 平均1.124，大約提速1s ,提速 35% 左右 devtoo：cheap-module-eval-source-map