此篇分享為 vue-cli2.0 中 webpack 的優(yōu)化配置茫陆。
1圈盔、按需引入組件
例如引入 element-ui 府怯，用到哪些組件就引哪些
import {Button,Dialog} from 'element-ui';
Vue.use(Button); // 按鈕組件
Vue.use(Dialog); // 對話框組件
2煎饼、externals 屬性
webpack的externals屬性，將公共的或不常改動的第三方包名稱谤专，配置在屬性中躁锡，打包時會自動忽略當中的包。具體實現(xiàn)如下：
在 build/webpack.base.conf.js文件中：
module.exports = {
externals: {
Vue: 'Vue',
Axios: 'axios'
}
}
// 其中的 key--對應 import Axios名稱置侍，value--對應原始方法名稱
需要在根目錄映之，index.html 中引入一下
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
3、給定文件匹配范圍
include 規(guī)定需要處理的文件有哪些
enclude 排除不需要處理的文件夾
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')],
exclude: /node_modules/
}
4蜡坊、noParse 屬性
過濾掉不需要解析的文件
{
module: {
noParse: /jquery/,
rule: [
...
]
}
}
5杠输、cacheDirectory 緩存屬性
babel-loader提供了cacheDirectory選項參數(shù)，默認為false秕衙。
設置空或true時鹦牛，會利用系統(tǒng)的臨時文件夾緩存經(jīng)過 babel 處理好的模塊，對于 rebuild js 有著非常大的性能提升勇吊。
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
include: [resolve('src')],
exclude: /node_modules/
}
6曼追、happyPack 多個子進程并行
webpack 在打包過程中礼殊，loader 轉(zhuǎn)化js、css婚陪、img等文件是同步進行的近忙，一個一個的轉(zhuǎn)換未辆。
happyPack 的原理是咐柜，將這些任務分解到多個子進程中为狸，并行執(zhí)行病曾，執(zhí)行完成后把結(jié)果發(fā)送到主進程泰涂，從而減少整體的打包時間。
第一步：安裝
npm install happypack -D
第二步：引入和配置
修改 build/webpack.base.conf.js 文件的 module.rules 配置：
{
test: /\.vue$/,
loader: 'happypack/loader?id=happyVue'
},
{
test: /\.js$/,
loader: 'happypack/loader?id=happyBabel',
include: [resolve('src')],
exclude: /node_modules/
}
生產(chǎn)環(huán)境的話添加 build/webpack.prod.conf.js 文件配置：
const vueLoaderConfig = require('./vue-loader.conf')
const HappyPack = require('happypack')
const os = require('os')
// 創(chuàng)建共享進程池
const HappyPackThreadPool = HappyPack.ThreadPool({size:os.cpus().length})
plugins: [
...
new HappyPack({
id: 'happyVue', // 唯一的標識符id赁还，來代表當前的HappyPack是用來處理一類特定的文件
loaders: [{
loader: 'vue-loader',
options: vueLoaderConfig
}],
threadPoll: HappyPackThreadPool
}),
new HappyPack({
id: 'happyBabel',
loaders: ['babel-loader?cacheDirectory'],
threadPoll: HappyPackThreadPool
})
...
]
7蹈胡、使用 DllPlugin 和 DllReferencePlugin
此方法是獨立于 webpack 配置的。
1.在 build 下新建一個webpack.dll.conf.js文件內(nèi)容如下：
const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: {
vendor: ['vue', 'vue-router']
},
output: {
path: path.resolve('./static'),
filename: '[name].dll.js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve('./static', '[name]-manifest.json'),
name: '[name]'
}),
// 建議代碼壓縮，否則dll包會比較大。
new UglifyJsPlugin()
]
}
文件會生成在 static 目錄中谈息。
2.在 build/webpack.prod.conf.js 的 plugin 加入如下配置：
new webpack.DllReferencePlugin({
manifest: require('../static/vendor-manifest.json')
})
3.在 package.json 中添加快捷命令：
"scripts": {
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js"
}
4.在根目錄 index.html 中添加引用
<script type="text/javascript" src="./static/vendor.dll.js"></script>
生產(chǎn)環(huán)境打包時，先執(zhí)行npm run build:dll生成文件，然后再執(zhí)行npm run build即可豹休。
和 externals不同點是，有時項目會用到npm上沒有的包，這種情景就可以用DLLPlugin單獨打包成文件引用姥卢。
