如今候生，webpack 毫無疑問是前端構(gòu)建領(lǐng)域里最耀眼的一顆星唯鸭，無論你前端走哪條路線须蜗，都需要有很強(qiáng)的webpack 知識目溉。webpack 的基本用法這里就不展開講了明肮。主要探討一下如何提高 webpack 的打包速度缭付。
這篇文章以
vue cli3.0+柿估，webpack4.0+陷猫，nodejs10.0+這幾個版本為例秫舌。
一、打包分析
1.1绣檬、速度分析
我們的目的是優(yōu)化打包速度，那肯定需要一個速度分析插件娇未，此時 speed-measure-webpack-plugin 就派上用場了忘蟹。它的作用如下：
- 分析整個打包總耗時
- 每個
plugin和loader的耗時情況
首先，安裝插件
npm i -D speed-measure-webpack-plugin
然后修改 vue.config.js 配置文件 （vuecli3+ 版本的配置文件統(tǒng)一在這個文件里修改褥芒，如果沒有該文件嚼松，在根目錄新建一個）
// 導(dǎo)入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// 這里是自己項目里需要使用到的其他插件
new yourOtherPlugin()
]
})
}
運(yùn)行打包命令之后寝受，可以看到，打包總耗時為 2min,51.99s
1.2罕偎、體積分析
分析完打包速度之后很澄，接著我們來分析打包之后每個文件以及每個模塊對應(yīng)的體積大小。使用到的插件為 webpack-bundle-analyzer颜及，構(gòu)建完成后會在 8888 端口展示大小甩苛。
首先，安裝插件
npm i -D webpack-bundle-analyzer
修改 vue.config.js 配置文件
// 導(dǎo)入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 導(dǎo)入體積分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// 實例化速度分析插件
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// 實例化體積分析插件
new BundleAnalyzerPlugin()
]
})
}
構(gòu)建之后可以看到俏站，其中黃色塊 chunk-vendors 文件占比最大讯蒲，為 1.34MB
二、打包優(yōu)化
2.1肄扎、多進(jìn)程多實例構(gòu)建墨林，資源并行解析
多進(jìn)程構(gòu)建的方案比較知名的有以下三個：
- thread-loader (推薦使用這個)
- parallel-webpack
- HappyPack
這里以 thread-loader 為例配置多進(jìn)程多實例構(gòu)建
安裝 loader
npm i -D thread-loader
接下來在 vue.config.js 配置文件中使用該 loader
// 導(dǎo)入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
module: {
rules: [
{
test: /\.js$/,
use: ['thread-loader']
}
]
}
})
}
然后看下構(gòu)建花費(fèi)的時間， 2min,49.21s犯祠，相較于之前提升了 5s
2.2旭等、公用代碼提取，使用 CDN 加載
對于vue雷则，vuex辆雾，vue-router，axios月劈，echarts，swiper等我們可以利用webpack的externals參數(shù)來配置藤乙，這里我們設(shè)定只需要在生產(chǎn)環(huán)境中才需要使用猜揪。
下面配置 vue.config.js
// 導(dǎo)入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 導(dǎo)入體積分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
//判斷是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV === 'production';
//定義 CDN 路徑，這里采用 bootstrap 的 cdn
const cdn = {
css: [
'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
],
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
]
}
// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
chainWebpack: config => {
// 生產(chǎn)環(huán)境配置
if (isProduction) {
// 生產(chǎn)環(huán)境注入 cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: smp.wrap({
module: {
rules: [
{
test: /\.js$/,
use: ['thread-loader']
}
]
},
plugins: [
new BundleAnalyzerPlugin()
],
//生產(chǎn)環(huán)境注入 cdn
externals: isProduction && {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
'echarts': 'echarts',
'swiper': 'Swiper'
} || {}
})
}
緊接著坛梁，改造 html 頁面而姐。用于讓我們配置的 cdn 路徑注入到 html 頁面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 使用 CDN 的 CSS 文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 使用 CDN 的 JS 文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
最重要的一步，看下效果划咐，可以看到現(xiàn)在耗時 1min拴念，39.19s，整整提升了 1 分多鐘褐缠！
2.3政鼠、多進(jìn)程多實例并行壓縮
并行壓縮主流有以下三種方案
- 使用 parallel-uglify-plugin 插件
- uglifyjs-webpack-plugin 開啟 parallel 參數(shù)
- terser-webpack-plugin 開啟 parallel 參數(shù) （推薦使用這個，支持 ES6 語法壓縮）
安裝插件依賴
npm i -D terser-webpack-plugin
接下來在 vue.config.js 配置文件中使用插件队魏，最終的配置文件如下
// 導(dǎo)入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 導(dǎo)入代碼壓縮插件
const TerserPlugin = require("terser-webpack-plugin");
// 導(dǎo)入體積分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
//判斷是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV === 'production';
//定義 CDN 路徑公般，這里采用 bootstrap 的 cdn
const cdn = {
css: [
'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
],
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
]
}
// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
chainWebpack: config => {
// 生產(chǎn)環(huán)境配置
if (isProduction) {
// 生產(chǎn)環(huán)境注入 cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: smp.wrap({
module: {
rules: [
{
test: /\.js$/,
use: ['thread-loader']
}
]
},
plugins: [
new BundleAnalyzerPlugin()
],
//生產(chǎn)環(huán)境注入 cdn
externals: isProduction && {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
'echarts': 'echarts',
'swiper': 'Swiper'
} || {},
optimization: {
minimizer: [
new TerserPlugin({
parallel: 4
})
]
}
})
}
2.4、使用 polyfill 動態(tài)服務(wù)
動態(tài) polyfill 指的是根據(jù)不同的瀏覽器，動態(tài)載入需要的 polyfill官帘。 Polyfill.io 通過嘗試使用 polyfill 重新創(chuàng)建缺少的功能瞬雹，可以更輕松地支持不同的瀏覽器，并且可以大幅度的減少構(gòu)建體積刽虹。
Polyfill Service 原理
識別 User Agent酗捌，下發(fā)不同的 Polyfill
使用方法：在 index.html 中引入如下 script 標(biāo)簽
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
三、完結(jié)
At last涌哲，看完之后有什么不懂的意敛，可以留言反饋。
轉(zhuǎn)載請注明出處：http://www.reibang.com/p/481e7214a134
作者：TSY
個人空間：https://hxkj.vip
