如果 Vue 項(xiàng)目比較大．或者說項(xiàng)目中引入了許多第三方庫(kù)，那么在執(zhí)行 npm run build 構(gòu)建項(xiàng)目的時(shí)候會(huì)極其的慢．
下面是整理的一些優(yōu)化技巧，可以有效地提高打包速度。
一、配置 resolve.modules
1，優(yōu)化原理
（1）webpack 的 resolve.modules 是用來配置模塊庫(kù)（即 node_modules）所在的位置。當(dāng) js 里出現(xiàn) import 'vue' 這樣不是相對(duì)、也不是絕對(duì)路徑的寫法時(shí)，它便會(huì)到 node_modules 目錄下去找。
（2）在默認(rèn)配置下，webpack 會(huì)采用向上遞歸搜索的方式去尋找。但通常項(xiàng)目目錄里只有一個(gè) node_modules，且是在項(xiàng)目根目錄。為了減少搜索范圍，可我們以直接寫明 node_modules 的全路徑。
2，操作步驟
（1）打開 build/webpack.base.conf.js 文件，添加如下配置：
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
（2）保存后再次構(gòu)建項(xiàng)目，可以發(fā)現(xiàn)時(shí)間縮短了 13s 左右。
二、配置裝載機(jī)的 include & exclude
1，優(yōu)化原理
（1）webpack 的裝載機(jī)（loaders）里的每個(gè)子項(xiàng)都可以有 include 和 exclude 屬性：
- include：導(dǎo)入的文件將由加載程序轉(zhuǎn)換的路徑或文件數(shù)組（把要處理的目錄包括進(jìn)來）
- exclude：不能滿足的條件（排除不處理的目錄）
（2）我們可以使用 include 更精確地指定要處理的目錄，這可以減少不必要的遍歷，從而減少性能損失。
（3）同時(shí)使用 exclude 對(duì)于已經(jīng)明確知道的，不需要處理的目錄，予以排除，從而進(jìn)一步提升性能。
2，操作步驟
（1）打開 build/webpack.base.conf.js 文件，添加如下高亮配置：
第 7 行的 easytable 如果項(xiàng)目沒用到可以把它從 include 中去除。
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig,
include: [resolve('src'), resolve('node_modules/vue-easytable/libs')],
exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')],
exclude: /node_modules/
},
（2）保存后再次構(gòu)建項(xiàng)目，可以發(fā)現(xiàn)時(shí)間又縮短了 2s 左右。
三、使用 webpack-parallel-uglify-plugin 插件來壓縮代碼
1，優(yōu)化原理
（1）默認(rèn)情況下 webpack 使用 UglifyJS 插件進(jìn)行代碼壓縮，但由于其采用單線程壓縮，速度很慢。
（2）我們可以改用 webpack-parallel-uglify-plugin 插件，它可以并行運(yùn)行 UglifyJS 插件，從而更加充分、合理的使用 CPU 資源，從而大大減少構(gòu)建時(shí)間。
2，操作步驟
（1）執(zhí)行如下命令安裝 webpack-parallel-uglify-plugin
npm i webpack-parallel-uglify-plugin
（2）打開 build/webpack.prod.conf.js 文件，并作如下修改：
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
//....
// 刪掉webpack提供的UglifyJS插件
//new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// warnings: false
// }
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
//}),
// 增加 webpack-parallel-uglify-plugin來替換
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
}),
（3）保存后再次構(gòu)建項(xiàng)目，可以發(fā)現(xiàn)時(shí)間又縮短了 55s 左右。
四、使用 HappyPack 來加速代碼構(gòu)建
1，優(yōu)化原理
（1）由于運(yùn)行在 Node.js 之上的 Webpack 是單線程模型的，所以 Webpack 需要處理的事情只能一件一件地做，不能多件事一起做。
（2）而 HappyPack 的處理思路是：將原有的 webpack 對(duì) loader 的執(zhí)行過程，從單一進(jìn)程的形式擴(kuò)展多進(jìn)程模式，從而加速代碼構(gòu)建。
2，操作步驟
（1）執(zhí)行如下命令安裝 happypack：
npm i happypack
（2）打開 build/webpack.base.conf.js 文件，并作如下修改：
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
module: {
rules: [
{
test: /\.js$/,
//把對(duì).js 的文件處理交給id為happyBabel 的HappyPack 的實(shí)例執(zhí)行
loader: 'happypack/loader?id=happyBabel',
include: [resolve('src')],
//排除node_modules 目錄下的文件
exclude: /node_modules/
},
]
},
plugins: [
new HappyPack({
//用id來標(biāo)識(shí) happypack處理那里類文件
id: 'happyBabel',
//如何處理 用法和loader 的配置一樣
loaders: [{
loader: 'babel-loader?cacheDirectory=true',
}],
//共享進(jìn)程池
threadPool: happyThreadPool,
//允許 HappyPack 輸出日志
verbose: true,
})
]
}
五、利用 DllPlugin 和 DllReferencePlugin 預(yù)編譯資源模塊
1，優(yōu)化原理
（1）我們的項(xiàng)目依賴中通常會(huì)引用大量的 npm 包，而這些包在正常的開發(fā)過程中并不會(huì)進(jìn)行修改，但是在每一次構(gòu)建過程中卻需要反復(fù)的將其解析，而下面介紹的兩個(gè)插件就是用來規(guī)避此類損耗的：
- DllPlugin 插件：作用是預(yù)先編譯一些模塊。
- DllReferencePlugin 插件：它的所用則是把這些預(yù)先編譯好的模塊引用起來。
（2）注意：DllPlugin 必須要在 DllReferencePlugin 執(zhí)行前先執(zhí)行一次，dll 這個(gè)概念應(yīng)該也是借鑒了 windows 程序開發(fā)中的 dll 文件的設(shè)計(jì)理念。
2，操作步驟
（1）在 build 文件夾中新建 webpack.dll.conf.js 文件，內(nèi)容如下（主要是配置下需要提前編譯打包的庫(kù)）：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['vue/dist/vue.common.js',
'vue-router',
'axios',
'mint-ui',
'vue-cordova',
'@fortawesome/fontawesome-svg-core',
'@fortawesome/free-solid-svg-icons',
'@fortawesome/free-regular-svg-icons',
'@fortawesome/free-brands-svg-icons',
'@fortawesome/vue-fontawesome']
},
output: {
path: path.join(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library' // vendor.dll.js中暴露出的全局變量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
（2）編輯 package.json 文件，添加一條編譯命令：
{
"name": "ddjk_vue",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Boss",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js"
},
（3）接著執(zhí)行 npm run build:dll 命令來生成 vendor.dll.js。
注意：如果之后這些需要預(yù)編譯的庫(kù)又有變動(dòng)，則需再次執(zhí)行 npm run build:dll 命令來重新生成 vendor.dll.js
（4）index.html 這邊將 vendor.dll.js 引入進(jìn)來。
<body>
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
</body>
（5）打開 build/webpack.base.conf.js 文件，編輯添加如下高亮配置，作用是通過 DLLReferencePlugin 來使用 DllPlugin 生成的 DLL Bundle。
const webpack = require('webpack');
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
//.....
plugins: [
// 添加DllReferencePlugin插件
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
}),
]
}
（6）保存后再次構(gòu)建項(xiàng)目，可以發(fā)現(xiàn)時(shí)間又縮短了許多。
六、使用fast-sass-loader代替sass-loader
fast-sass-loader可以并行地處理sass,在提交構(gòu)建之前會(huì)先組織好代碼，速度也會(huì)快一些
http://www.hangge.com/blog/cache/detail_2105.html
https://www.cnblogs.com/imwtr/p/7801973.html 更多優(yōu)化
