/ REACT WEBPACK ASP.NET MVC

Webpack Plugin 介紹

Npm-Install-Webpack-Plugin

這個套件會自動幫你安裝專案中有引用，但是尚未 npm install 的套件，非常的方便。

官網示意圖

示意畫面

先安裝 Plugin

npm i npm-install-webpack-plugin -D

設定檔調整如下

webpack.common.js
var NpmInstallPlugin = require('npm-install-webpack-plugin')
module.exports = {
    plugins: [
        new NpmInstallPlugin({
            dev: false // Use --save or -save-dev
        })
    ]
}

詳細使用方式請看這裡

Ignore-Plugin

顧名思義可以讓我們忽略掉某些模組的引用。最常使用的是用來忽略 moment 的 locale 模組。

設定檔調整如下

webpack.common.js
var webpack = require('webpack')
module.exports = {
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
}
移除 locale 之前

優化前

移除 locale 之後

優化後

或是我們可以只保留 zh-tw

webpack.common.js
new webpack.IgnorePlugin(/^\.\/(?!zh-tw)/, /moment[\/\\]locale$/)

這個套件對於最後的 Bundle 體積大小優化效果相當好喔。

2019 IT 邦鐵人賽文章連結