隨著 Web 前端技術的不斷發展，Vue.js 已經成為了一個非常受歡迎的前端框架。 Vue.js 中的 Vue-cli 和 Webpack 作為建置工具也成為了必要的配套工具。在開發專案時，我們通常會使用 Vue-cli 來建立應用程式框架，使用 Webpack 打包發布專案。但在大專案打包發佈過程中，由於專案體積龐大，可能會出現編譯速度慢、打包體積大、存取速度較慢等問題，為了避免這些問題的出現，本篇文章將介紹Vue-cli 和Webpack 打包發布優化指南，幫助開發者更好地優化大型專案的發布效果。
一、Vue-cli 專案最佳化
- 按需引入第三方元件
在開發過程中，我們通常會使用jQuery、Bootstrap、 Echarts 等第三方函式庫，但是引入整個函式庫可能會造成打包體積過大，存取速度慢的問題。因此，我們可以使用 babel-plugin-component 外掛程式來進行按需引入。
在babel.config.js 中設定：
plugins: [
['component', {
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}]
]登入後複製
這裡以Element-ui 為例，使用外掛程式按需引入函式庫，可以大大減少打包體積。
- 設定 Webpack 屬性
我們可以透過修改 vue.config.js 檔案來修改 Webpack 的設定屬性。以下是一些常用的Webpack 屬性的設定方法：
// 修改输出文件名格式
output: {
filename: '[name].[hash].js'
}
// 修改 publicPath
publicPath: process.env.NODE_ENV === 'production' ?
'/production-sub-path/' : '/'
// 压缩代码
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
dead_code: true
}
}
// 配置 externals，将大型的第三方库从打包代码中剥离
externals: {
'vue': 'Vue',
'jquery': 'jQuery',
'bootstrap': 'Bootstrap',
'echarts': 'echarts',
'moment': 'moment'
}
// 使用 Webpack-bundle-analyzer 查看打包后的各个模块的大小
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}登入後複製
二、Webpack 最佳化
- 使用多執行緒建構
##使用多執行緒建置可以大大提高打包速度，可以使用
happypack 外掛程式來實現多執行緒建置。使用該外掛程式需要先安裝happypack：
npm install happypack -D
登入後複製
接下來將原來的設定檔:
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader'
},
...
]
}登入後複製
修改為：
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'happypack/loader?id=happyBabel'
},
...
]
},
plugins: [
new HappyPack({
id: 'happyBabel',
loaders: ['babel-loader'],
threadPool: happyThreadPool,
verbose: true
})
]登入後複製
這裡使用
happypack 外掛程式來啟用多執行緒建置。
使用DllPlugin 和DllReferencePlugin 技術
DllPlugin 和DllReferencePlugin 技術主要是將一些不常變動的函式庫單獨打包成一個lib 文件，這樣在每次打包時就不用再去打包這些庫文件，只需要在之後使用DllReferencePlugin 進行引入即可。
使用方法：
先設定DllPlugin：const path = require('path');
const webpack = require('webpack');
const dllPath = 'static/dll';
module.exports = {
entry: {
vendor: ['vue', 'vue-router', 'vuex', 'axios', 'lodash'] // 需要单独打包的库
},
output: {
path: path.join(__dirname, `../${dllPath}`),
filename: '[name].dll.js',
library: '[name]_[hash]' // 暴露全局变量，避免前后两次打包，库名字变更
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, `../${dllPath}`, 'manifest.json')
})
]
};登入後複製
#執行打包：cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules
登入後複製
############### #在###index.html### 中使用###
