webpack打包優化

目錄

• webpack打包優化
  • 理順思路
    • 一句話概述：
    • 優化目標：
    • 另容易誤解的地方有：
    • 涉及的文件：
    • 優化結果
  • 操做步驟
    • 1.建立依賴包的webpack配置文件 webpack.dll.config.js（名字能夠改）
    • 2.命令行執行webpack --config webpack.dll.config.js打包依賴包
    • 3.在業務打包的webpack配置文件中經過DllReferencePlugin在打包的時候引用依賴包
    • 4.在html文件中經過script標籤引入依賴包
    • 5.關於package.json中的命令

webpack打包優化

標籤（空格分隔）： 前端 webpack vue

---

理順思路

一句話概述：

優勢：把依賴庫提早打包出來並保留引用，打包功能模塊時再也不打包依賴庫，只引用依賴，從而減小打包時間。思想來源：知乎專欄-完全解決Webpack打包性能問題
缺點：本方式產生了依賴包的js，要在html之初引入，和懶加載的觀念有所衝突。懶加載是在須要的時候才請求資源，而本方式提早把某些可能不須要的資源加載了進來。

優化目標：

目標：

是爲了減小發布到用於測試的「僞生產環境」時打包業務模塊過程當中npm run testbuild的時間【頻繁執行】
並非減小本地開發環境npm run dev的時間
也不是減小發布到「生產環境」時打包業務模塊過程當中npm run build的時間【不頻繁，上線才執行】

注：關於npm run testbuild

因爲咱們開發的項目在在微信瀏覽器內打開，而且使用了微信的jssdk，因此須要發佈到真實的微信環境進行測試（這個動做咱們要常常進行）。可是這只是咱們開發人員才知曉的微信公衆號（和咱們項目對外服務的公衆號是等價的，只不過用於真正發佈前測試）
因此對於有些朋友，不頻繁執行打包操做的話，可能並不須要進行本優化，爲了懶加載，甚至不該該進行本優化。

另容易誤解的地方有：

本地開發目前不須要優化，因此本優化和webpack.config.js無關
生產環境須要懶加載，咱們不但願該環境一開始就加載全部的依賴包，因此本次優化和npm run build使用的webpack.production.js無關
和須要常常執行的打包發佈到測試生產環境的操做npm run testbuild有關，因此咱們新建了webpack.dll.config.js和webpack.dll.production.js。所作的優化基本圍繞這兩個文件進行。

涉及的文件：

新建webpack.dll.config.js：這是打包依賴包的配置文件
新建webpack.dll.production.js：這是npm run testbuild時執行的配置文件，使用webpack.DllReferencePlugin引用了提早打包好的依賴包
修改package.json：新增dllconfig命令、testbuild命令
修改~pathto/index.html：經過script標籤引入打包好的依賴包文件。生產環境不使用本優化，不引入依賴包的js，測試生產環境使用的本優化，引入依賴包的js。
修改.gitignore：忽略webpack.dll.config.js打包依賴包過程當中產生的manifest.json文件

優化結果

優化效果：npm run build的時間爲110秒左右，npm run testbuild的爲50秒左右。
反作用：須要在測試生產環境的套模板頁面另引入一個多餘的js：即以前打包的依賴包。
注意：能夠考慮把依賴包放在靜態資源服務器上，每回修改webpack.dll.config.js時才執行一次npm run dllconfig並上傳。

操做步驟

1.建立依賴包的webpack配置文件 webpack.dll.config.js（名字能夠改）

/**
 * @file 使用DllPlugin把經常使用依賴單獨打包，提升webpack打包效率
 * @author Liu Junyang
 * 在應用到這些依賴包的後端套模板的html須要使用script標籤引用output的filename的js文件
 */
var path = require('path')
const webpack = require('webpack');

const vendors = [
    'vue',
    'vue-router',
    'vue-resource',
    'vue-touch',
    'mint-ui',
    'swiper_3.4.0_hack',
    'hack_swiper'
];

module.exports = {
    output: {
        path: 'static',
        filename: '[name].js',
        library: '[name]',
    },
    entry: {
        "vendors": vendors,
    },
    plugins: [
        new webpack.DllPlugin({
            path: 'manifest.json',
            name: '[name]',
            context: __dirname,
        }),
    ],
    resolve: {
        alias: {
            'vue': path.resolve(__dirname, './node_modules/vue/dist/vue.min.js'),
            'style': path.resolve(__dirname, './src/style'),
            'module': path.resolve(__dirname, './src/module'),
            'libs': path.resolve(__dirname, './src/libs'),
            'layout': path.resolve(__dirname, './src/layout'),
            'images': path.resolve(__dirname, './src/images'),
            'pages': path.resolve(__dirname, './src/pages')
        },
        fallback: path.resolve(__dirname, './src/util')
    },
};

2.命令行執行webpack --config webpack.dll.config.js打包依賴包

3.在業務打包的webpack配置文件中經過DllReferencePlugin在打包的時候引用依賴包

plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false  // remove all comments
            },
            compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true
            }
        }),
        new webpack.ProvidePlugin({
            $: 'zepto/dist/zepto.min.js',
            jQuery: 'zepto/dist/zepto.min.js'
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./manifest.json'),
        })
    ]

4.在html文件中經過script標籤引入依賴包

{% if STATIC_JS_DEBUG %}
    <script src="/static/vue/vendors.js"></script>
{% endif %}

5.關於package.json中的命令

{
    "scripts": {
        "dev": "webpack-dev-server --inline --hot --quiet --display-error-details",
        "dllconfig": "rm -rf static/* && webpack --config webpack.dll.config.js",
        "testbuild": "npm run dllconfig && webpack --progress --hide-modules --config webpack.dll.production.js",
        "build": "rm -rf static/*  && webpack --progress --hide-modules --config webpack.production.js",
        "ontestline": "npm run testbuild && npm run html && ./bin/online",
        "online": "npm run build && npm run html && ./bin/online"
  }
}