此篇分享為 vue-cli2.0 中 webpack 的優(yōu)化配置。

1、按需引入組件

例如引入 element-ui ，用到哪些組件就引哪些

import {Button,Dialog} from 'element-ui';
Vue.use(Button); // 按鈕組件
Vue.use(Dialog); // 對(duì)話(huà)框組件

2、externals 屬性

webpack的externals屬性，將公共的或不常改動(dòng)的第三方包名稱(chēng)，配置在屬性中，打包時(shí)會(huì)自動(dòng)忽略當(dāng)中的包。具體實(shí)現(xiàn)如下：

在 build/webpack.base.conf.js文件中：

module.exports = {
    externals: {
        Vue: 'Vue',
        Axios: 'axios'
    }
}
// 其中的 key--對(duì)應(yīng) import Axios名稱(chēng)，value--對(duì)應(yīng)原始方法名稱(chēng)

需要在根目錄，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 屬性

過(guò)濾掉不需要解析的文件

{
    module: {
        noParse: /jquery/,
        rule: [
            ...
        ]
    }
}

5、cacheDirectory 緩存屬性

babel-loader提供了cacheDirectory選項(xiàng)參數(shù)，默認(rèn)為false。

設(shè)置空或true時(shí)，會(huì)利用系統(tǒng)的臨時(shí)文件夾緩存經(jīng)過(guò) babel 處理好的模塊，對(duì)于 rebuild js 有著非常大的性能提升。

{
    test: /\.js$/,
    loader: 'babel-loader?cacheDirectory',
    include: [resolve('src')],
    exclude: /node_modules/
}

6、happyPack 多個(gè)子進(jìn)程并行

webpack 在打包過(guò)程中，loader 轉(zhuǎn)化js、css、img等文件是同步進(jìn)行的，一個(gè)一個(gè)的轉(zhuǎn)換。

happyPack 的原理是，將這些任務(wù)分解到多個(gè)子進(jìn)程中，并行執(zhí)行，執(zhí)行完成后把結(jié)果發(fā)送到主進(jìn)程，從而減少整體的打包時(shí)間。

第一步：安裝

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)境的話(huà)添加 build/webpack.prod.conf.js 文件配置：

const vueLoaderConfig = require('./vue-loader.conf')
const HappyPack = require('happypack')
const os = require('os')
// 創(chuàng)建共享進(jìn)程池
const HappyPackThreadPool = HappyPack.ThreadPool({size:os.cpus().length})
plugins: [
    ...
    new HappyPack({
        id: 'happyVue', // 唯一的標(biāo)識(shí)符id，來(lái)代表當(dāng)前的HappyPack是用來(lái)處理一類(lèi)特定的文件
        loaders: [{
            loader: 'vue-loader',
            options: vueLoaderConfig
        }],
        threadPoll: HappyPackThreadPool
    }),
    new HappyPack({
        id: 'happyBabel',
        loaders: ['babel-loader?cacheDirectory'],
        threadPoll: HappyPackThreadPool
    })
    ...
]

7、使用 DllPlugin 和 DllReferencePlugin

此方法是獨(dú)立于 webpack 配置的。

1.在 build 下新建一個(gè)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包會(huì)比較大。
        new UglifyJsPlugin()
    ]
}

文件會(huì)生成在 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)境打包時(shí)，先執(zhí)行npm run build:dll生成文件，然后再執(zhí)行npm run build即可。

和 externals不同點(diǎn)是，有時(shí)項(xiàng)目會(huì)用到npm上沒(méi)有的包，這種情景就可以用DLLPlugin單獨(dú)打包成文件引用。