爲什麼要優化打包？
- 項目越做越大，依賴包越來越多，打包文件太大
- 單頁面應用首頁白屏時間長，用戶體驗差
我們的目的
- 減小打包後的文件大小
- 首頁按需引入文件
- 優化 webpack 打包時間
優化方式
1、 按需加載
1.1 路由組件按需加載
const router = [
{
path: '/index',
component: resolve => require.ensure([], () => resolve(require('@/components/index')))
},
{
path: '/about',
component: resolve => require.ensure([], () => resolve(require('@/components/about')))
}
]
1.2 第三方組件和插件。按需加載需引入第三方組件
// 引入全部組件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)// 按需引入組件
import { Button } from 'element-ui'
Vue.component(Button.name, Button)
1.3 對於一些插件，如果只是在個別組件中用的到，也可以不要在 main.js 裏面引入，而是在組件中按需引入
// 在main.js引入
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)// 按組件按需引入
import { Vuelidate } from 'vuelidate'
2、優化 loader 配置
- 優化正則匹配
- 通過 cacheDirectory 選項開啓緩存
- 通過 include、exclude 來減少被處理的文件。
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
include: [resolve('src')]
}
]
}
3、優化文件路徑——省下搜索文件的時間
- extension 配置之後可以不用在 require 或是 import 的時候加文件擴展名,會依次嘗試添加擴展名進行匹配。
- mainFiles 配置後不用加入文件名，會依次嘗試添加的文件名進行匹配
- alias 通過配置別名可以加快 webpack 查找模塊的速度。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
4、生產環境關閉 sourceMap
- sourceMap 本質上是一種映射關係，打包出來的 js 文件中的代碼可以映射到代碼文件的具體位置,這種映射關係會幫助我們直接找到在源代碼中的錯誤。
- 打包速度減慢，生產文件變大，所以開發環境使用 sourceMap，生產環境則關閉。
5、代碼壓縮
- UglifyJS: vue-cli 默認使用的壓縮代碼方式，它使用的是單線程壓縮代碼，打包時間較慢
- ParallelUglifyPlugin: 開啓多個子進程，把對多個文件壓縮的工作分別給多個子進程去完成
兩種方法使用如下：
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: true,
parallel: true
}),new ParallelUglifyPlugin({
//緩存壓縮後的結果，下次遇到一樣的輸入時直接從緩存中獲取壓縮後的結果並返回，
//cacheDir 用於配置緩存存放的目錄路徑。
cacheDir: '.cache/',
sourceMap: true,
uglifyJS: {
output: {
comments: false
},
compress: {
warnings: false
}
}
})
]
打包速度和打包後的文件大小啊對比
| 方法 | 文件大小 | 打包速度 |
|---|---|---|
| 不用插件 | 14.6M | 32s |
| UglifyJsPlugin | 12.9M | 33s |
| ParallelUglifyPlugi | 7.98M | 17s |
6、提取公共代碼
- 相同資源重複被加載，浪費用戶流量，增加服務器成本。
- 每個頁面需要加載的資源太大，導致網頁首屏加載緩慢，影響用戶體驗。
webpack3 使用 CommonsChunkPlugin 的實現：
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module, count) {
console.log(module.resource, `引用次數${count}`)
//"有正在處理文件" + "這個文件是 .js 後綴" + "這個文件是在 node_modules 中"
return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: 'initial',
minChunks: 2
})
]
webpack4 使用 splitChunks 的實現：
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
priority: 1, //添加權重
test: /node_modules/, //把這個目錄下符合下面幾個條件的庫抽離出來
chunks: 'initial', //剛開始就要抽離
minChunks: 2 //重複2次使用的時候需要抽離出來
},
common: {
//公共的模塊
chunks: 'initial',
minChunks: 2
}
}
}
}
}
7、CDN 優化
- 隨着項目越做越大，依賴的第三方 npm 包越來越多，構建之後的文件也會越來越大。
- 再加上又是單頁應用，這就會導致在網速較慢或者服務器帶寬有限的情況出現長時間的白屏。
1、將 vue、vue-router、vuex、element-ui 和 axios 這五個庫，全部改爲通過 CDN 鏈接獲取，在 index.html 裏插入 相應鏈接。
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
<!-- built files will be auto injected -->
</body>
2、在 webpack.config.js 配置文件
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'Axios':'axios'
}
},
3、卸載依賴的 npm 包，npm uninstall axios element-ui vue vue-router vuex
4、修改 main.js 文件裏之前的引包方式
// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'Vue.use(ELEMENT)
Vue.use(VueRouter)const router = new VueRouter({
mode: 'hash', //路由的模式
routes
})new Vue({
router,
el: '#app',
render: h => h(App)
})
8、使用 HappyPack 多進程解析和處理文件
- 由於運行在 Node.js 之上的 Webpack 是單線程模型的，所以 Webpack 需要處理的事情需要一件一件的做，不能多件事一起做。
- HappyPack 就能讓 Webpack 把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。
- HappyPack 對 file-loader、url-loader 支持的不友好，所以不建議對該 loader 使用。
使用方法如下：
- HappyPack 插件安裝： npm i -D happypack
- webpack.base.conf.js 文件對 module.rules 進行配置
webpack.base.conf.js：
module: {
rules: [
{
test: /\.js$/,
use: ['happypack/loader?id=babel'],
include: [resolve('src'), resolve('test')],
exclude: path.resolve(__dirname, 'node_modules')
},
{
test: /\.vue$/,
use: ['happypack/loader?id=vue']
}
]
}
3.在生產環境 webpack.prod.conf.js 文件進行配置
webpack.prod.conf.js ：
const HappyPack = require('happypack')
// 構造出共享進程池，在進程池中包含5個子進程
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
new HappyPack({
// 用唯一的標識符id，來代表當前的HappyPack是用來處理一類特定的文件
id: 'babel',
// 如何處理.js文件，用法和Loader配置中一樣
loaders: ['babel-loader?cacheDirectory'],
threadPool: HappyPackThreadPool
}),
new HappyPack({
id: 'vue', // 用唯一的標識符id，來代表當前的HappyPack是用來處理一類特定的文件
loaders: [
{
loader: 'vue-loader',
options: vueLoaderConfig
}
],
threadPool: HappyPackThreadPool
})
]
總結
- 比較實用的方法: 按需加載，優化loader配置，關閉生產環境的sourceMap，CDN優化。
- vue-cli已做的優化： 代碼壓縮，提取公共代碼，再優化空間不大。
- 根據項目實際需要和自身開發水平選擇優化方法，必須避免因爲優化產生bug。