開發(fā)環(huán)境

項目腳手架 vue-cli（官方推薦，非3.0）
打包構(gòu)建工具 webpack@3.6.0
node@8.9.4（6以上都是可以的）

npm install vue-cli -g // 全局安裝腳手架
vue init webpack projectName // vue腳手架初始化項目
npm install vuex axios qs element-ui -S // 安裝項目所需依賴

定位打包優(yōu)化

在package.json中，vue-cli已經(jīng)為我們添加了開發(fā)和生產(chǎn)命令行腳本執(zhí)行代碼

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
},

項目打包時候，執(zhí)行npm run build
如代碼所寫，通過node執(zhí)行了build文件夾下面的build.js文件

在build.js中，不難看出

const webpack = require('webpack')
const webpackConfig = require('./webpack.prod.conf')

webpack(webpackConfig, (err, stats) => {
    ... // 此處為webpack打包回調(diào)處理
})

順著webpack.prod.conf.js的引入，我們可以看出webpack的打包配置都是在這文件里面，我們通過webpack所做的打包優(yōu)化也由此開始配置。

webpack基礎(chǔ)結(jié)構(gòu)介紹

這里先介紹下webpack配置的大致結(jié)構(gòu)（基礎(chǔ)部分了解的可以直接跳過）

1. 入口起點
   入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

 module.exports = {
    entry: './src/app.js', // 默認值是'./src'
}

webpack執(zhí)行時候的入口文件從這里開始執(zhí)行，webpack可以從這里開始讀取webpackConfig的相關(guān)配置進行項目開發(fā)打包

2. 輸出
   配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個入口起點，但只指定一個輸出配置。

 module.exports = {
    output:  {
          filename: 'bundle.js',
          path: './dist/js'
    }
}

webpack將打包好的文件命名為bundle.js并輸出在dist/js目錄下面

3. 模式
   提供 mode 配置選項，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化。

 module.exports = {
     mode: 'production'
 };

模式定義并區(qū)分了webpack的執(zhí)行環(huán)境，大致可以區(qū)分為開發(fā)環(huán)境和生產(chǎn)環(huán)境

4. loader
   loader 用于對模塊的源代碼進行轉(zhuǎn)換，也是webpack個人認為最重要的部分，webpack在識別整個項目打包部分的代碼時候，我們可以根據(jù)自己項目的文件，進行識別，并分配不同的loader去對源代碼進行轉(zhuǎn)換處理。

module.exports = {
    module: {
      rules: [
        { test: /\.css$/, use: 'css-loader' },
        { test: /\.ts$/, use: 'ts-loader' }
      ]
    }
};

如同上面的代碼，遇到.css后綴結(jié)尾的文件，分配給css-loader去對源代碼進行轉(zhuǎn)換，遇到.ts后綴結(jié)尾的文件，分配給ts-loader去做處理。

5. 插件
   webpack文檔定義為webpack的支柱功能，它支撐著webpack的各種額外功能，解決loader無法解決的其他事情。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過npm 安裝
const webpack = require('webpack'); //訪問內(nèi)置的插件
const path = require('path');

const config = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/js')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

上面的例子有兩個功能，壓縮js和index.html自動引入打包靜態(tài)資源

文章的主線是打包優(yōu)化，webpack的細致結(jié)構(gòu)可以去webpack官方文檔進一步了解

優(yōu)化步驟

回到webpack.prod.conf.js文件中，vue-cli腳手架對基礎(chǔ)部分的webpack配置做了統(tǒng)一的提取，寫在webpack.base.conf.js里面。

定義絕對路徑

在webpack.base.conf.js文件中，我們可以在resolve中對項目的絕對路徑進行定義，畢竟相對路徑在js中，我認為是毒瘤...

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        '@': resolve('src'),
        'components': resolve('src/components'),
        'common': resolve('src/common')
    }
},

大的依賴利用cdn引入

在webpack.base.conf.js文件中，對較大的文件在index.html中直接引入cdn地址，然后在可以在externals中在項目進行定義

// index.html
<script src="http://cdn.bootcss.com/echarts/4.0.4/echarts.common.min.js"> </script>

然后在externals中定義供項目直接使用

externals: {
   "echarts": "echarts"
}

externals中的key是給import的時候用的，value表示的是如何在global中訪問到該對象，這里是window.echarts，在項目中可以直接使用，利用cdn優(yōu)勢的同時，避免webpack打包文件過大。

關(guān)掉productionSourceMap

在config目錄下面的index.js文件中，vue-cli腳手架對開發(fā)環(huán)境和生產(chǎn)環(huán)境都做了相關(guān)配置，其中在build配置下設(shè)置productionSourceMap為false，避免產(chǎn)出.map后綴結(jié)尾的js文件，（除非需要線上調(diào)試）

開啟gzip

同樣在config目錄下面的index.js文件中，開啟productionGzip，可以產(chǎn)出.gz后綴結(jié)尾的js文件，個人印象中將近減少了2/3的打包代碼體積。瀏覽器會優(yōu)先加載.gz后綴結(jié)尾的文件，如果瀏覽器不能識別，再加載正常的文件，當然后臺nginx部署的時候也是可以實現(xiàn)gzip壓縮功能。需要值得注意的是，開啟productionGzip后，需要安裝一個webpack插件進行配合

npm install compression-webpack-plugin -D

這點可以在webpack.prod.conf.js里面悉知。

區(qū)別于腳手架自帶分離方案的dll代碼分離

vue-cli腳手架在webpack.prod.conf.js中，采用webpack插件自帶的CommonsChunkPlugin方案，對項目中所引入的各種依賴進行分離打包。

一個完整項目下來，我們可能引用了vue,vue-router,vuex,axios,qs,element-ui,iviews,vux等等一系列依賴，類似于以上的依賴，我們基本不會經(jīng)常變動，腳手架自帶的方案是將這些提取出來存放為vendor.js和app.js文件中做了相關(guān)優(yōu)化

new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks(module) {
            // any required modules inside node_modules are extracted to vendor
            return (
                module.resource &&
                /\.js$/.test(module.resource) &&
                module.resource.indexOf(
                    path.join(__dirname, '../node_modules')
                ) === 0
            )
        }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
        name: 'app',
        async: 'vendor-async',
        children: true,
        minChunks: 3
    }),

上面的方案，可以將vue,vuex等這些基本不會變動的依賴從bundle.js中抽離出來，最開始的時候加載一次，可以起到緩存的作用供后續(xù)使用，但是有個缺陷，項目每次打包的時候還是會去抽離打包這些依賴。

為了提高打包時的速度，我們可以效仿window系統(tǒng)的.dll文件，dll 全稱是：dynamic link library（動態(tài)鏈接庫）。微軟官方介紹 dll 的一個使用場景：windows 系統(tǒng)提供一個 dialog box 庫，任何應(yīng)用都可以直接引用。

build文件夾下面新建webpack.dll.conf.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
    // 你想要打包的模塊的數(shù)組
    entry: {
        vendor: ['vue/dist/vue.esm.js', 'vuex', 'axios', 'vue-router', 'better-scroll', 'jsencrypt', 'qs']
    },
    output: {
        path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
        filename: '[name].dll.js',
        library: '[name]_library'
        // vendor.dll.js中暴露出的全局變量名。
        // 主要是給DllPlugin中的name使用，
        // 故這里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
    },
    plugins: [
        new webpack.DllPlugin({
        path: path.join(__dirname, '..', '[name]-manifest.json'),
        name: '[name]_library',
        context: __dirname
        }),
    ]
};

在package.json添加命令

"dll": "webpack --config ./build/webpack.dll.config.js"

打包前，我們執(zhí)行 npm run dll
會在static/js目錄下面生成 vendor.dll.js文件，在更目錄生成 vendor.-manifest.json

然后在webpack.prod.conf.js文件中，引入webpack dll插件DefinePlugin

new webpack.DllReferencePlugin({
    context: path.resolve(__dirname, '..'),
    manifest: require('../vendor-manifest.json')
}),

這樣在執(zhí)行 npm run build的時候，會自動忽略之前通過 npm run dll 記錄的依賴忽略項集合，加快打包

最后別往了在index.html中引入 生成的 vendor.dll.js（build前引入）

<script src="./static/js/vendor.dll.js"></script>