vue構建優化

緣由

在使用vue開發單頁面應用時，隨着項目頁面的增多，你會發現生產環境的build速度會很慢，同時頁面初始的js大小愈來愈大。當你沒法忍受的時候就該優化了。

思路

這方面的優化無非就是異步加載、提取一部分長期不須要更新代碼的基礎js庫。

方案

1、異步加載（懶加載）

能夠採用vue-router的路由懶加載點擊連接進行學習

2、對於提取基礎庫

能夠學習下DllPlugin和DllReferencePlugin兩個插件，同時配合（add-asset-html-webpack-plugin）一塊兒完成提取到自動引入。

第一步：新建一個webpack.dll.config.js(名字本身定義)

值得關注的是lib數組（資源依賴包，提早編譯）這裏根據本身項目的具體引用狀況自行添加

const webpack = require('webpack');
    const path = require('path');
    const isDebug = process.env.NODE_ENV === 'development';
    const outputPath = isDebug ? path.join(__dirname, '../src/common/debug') : path.join(__dirname, '../src/common/dist');
    const fileName = '[name]_[hash].js';
    
    // 資源依賴包，提早編譯
    const lib = [
      'vue',
      'vuex',
      'vue-router',
      'axios',
      'body-parser',
      'cookie-parser',
      'weixin-js-sdk',
      'element-ui',
      'vue-scroll'
    ];
    
    const plugin = [
      new webpack.DllPlugin({
        /**
         * path
         * 定義 manifest 文件生成的位置
         * [name]的部分由entry的名字替換
         */
        path: path.join(outputPath, 'manifest.json'),
        /**
         * name
         * dll bundle 輸出到那個全局變量上
         * 和 output.library 同樣便可。
         */
        name: '[name]_[hash]',
        context: __dirname
      }),
      new webpack.optimize.OccurrenceOrderPlugin()
    ];
    
    if (!isDebug) {
      plugin.push(
        // new webpack.DefinePlugin({
        //   'process.env.NODE_ENV': JSON.stringify('production')
        // }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          sourceMap: true
        })
      )
    }
    
    module.exports = {
      devtool: '#source-map',
      entry: {
        lib: lib
      },
      output: {
        path: outputPath,
        filename: fileName,
        /**
         * output.library
         * 將會定義爲 window.${output.library}
         * 在此次的例子中，將會定義爲`window.vendor_library`
         */
        library: '[name]_[hash]',
        libraryTarget: 'umd',
        umdNamedDefine: true
      },
      plugins: plugin
    }

第二步：執行構建

簡單的方式是在package.json文件中添加（須要注意的使用的是webpack2）

"dll-production": "NODE_ENV=production webpack --config  build/webpack.dll.config.js --progress",
"dll-test": "NODE_ENV=development webpack --config  build/webpack.dll.config.js --progress",

而後經過npm run dll-production 和 npm run dll-test進行構建
正如NODE_ENV的值同樣不一樣環境引用不一樣路徑下的lib.js
構建後目錄以下圖

第三步：引入lib.js

#安裝add-asset-html-webpack-plugin
$ npm install --save-dev add-asset-html-webpack-plugin

修改開發環境webpack.dev.config.js

#初始化
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

在plugins中添加
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(__dirname, '../src/common/debug/manifest.json'))
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, '../src/common/debug/lib_*.js') }),

執行npm run dev

修改生產環境webpack.prod.config.js

#初始化
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

在plugins中添加
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(__dirname, '../src/common/dist/manifest.json'))
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, '../src/common/dist/lib_*.js') }),

執行npm run build(同時與之前的構建速度對比，你會發現節省了不少時間，目前個人項目省了1/3時長)

dll-plugin與CommonsChunkPlugin（webpack4中替換爲SplitChunksPlugin）區別

共同點：都是提取公共模塊到父模塊中，利用緩存來提升訪問速度（第一次加載除外）
區別：dll-plugin須要手動去配置和打包公共模塊，CommonsChunkPlugin則是每次構建時按照配置打包公共模塊。

使用 DllPlugin 將更改不頻繁的代碼進行單獨編譯。這將改善引用程序的編譯速度，即便它增長了構建過程的複雜性。
webpack文檔也推薦使用dll-plugin進行公共模塊的分離。