記一次 webpack3 優化

項目中有 500 多個 ts 文件。每次 webpack 啓動 watch 都要 40 多秒。修改代碼後編譯也要 12-16 秒。實在是太慢了，因此嘗試優化一下。

總構建時間( run build): 45672ms
watch 時，修改代碼後構建： 12秒

使用 webpack-visualizer 分析 webpack 都打包了什麼。

webpack-visualizer 可將webpack打包的文件大小可視化，並展示依賴關係。
webpack-visualizer 使用方法。
分析生成的文件可見。文件總大小 1.42M 中，其中 vue 佔用了 500K+。

可是 webpack 中已排除 vue ,打包中不該包含 vue 模塊。

externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter'
  }

猜想是 import 時 使用了大寫的 import Vue from Vue
應該改成 import Vue from vue ,改成 小寫後，果真好了。。。
打包的文件變爲 838 kB,打包時間爲 41351ms
關於 externals的更多信息，能夠參照webpack externals詳解

優化 ts 構建

項目中使用的ts-loader來處理TypeScript,可是速度比較慢。
能夠採用兩種方式來優化:awesome-typescript-loader 或 thread-loader\Harrypack+cache-loader\hard-source-webpack-plugin+tsloader。
這兩種方式都使用到了多核+ 緩存來加快構建。
下面分別對比了兩種優化方式。

使用 thread-loader + cache-loader + ts-loader

總構建時間( run build): 27秒
watch 時，修改代碼後構建：8 秒

這裏有個官方的例子
webpack.config.js 中修改 loader 和添加插件。

{
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,

                use: [
                    { loader: 'cache-loader' },
                    {
                        loader: 'thread-loader',
                        options: {
                            workers: require('os').cpus().length - 1,
                        },
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true, // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
                            appendTsSuffixTo: [/\.vue$/],
                            transpileOnly: true,
                        }
                    }
                ]
            },
            //...
        ],

    },
    // ...
    plugins: [
        new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
    ]
}

使用 awesome-typescript-loader

總構建時間( run build): 27秒
watch 時，修改代碼後構建：6.5 秒

{
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: 'awesome-typescript-loader',
            },
            //...
        ],

    },
    // ...
    plugins: [
    ]
}

注： 這兩種方式都採用獨立線程來檢查 ts 語法錯誤。實際編譯速度可能更快。好比 awesome-typescript-loader watch 狀態，修改後編譯爲 2 秒。可是加上語法檢查要6秒。其實第二秒時已經編譯好了。

參考文章

1. [webpack 構建性能優化策略小結](https://segmentfault.com/a/11...
2. awesome-typescript-loader