此篇分享為 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單獨打包成文件引用。