webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 ,
webpack-parallel-uglify-plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下：
var paralleluglifyplugin = require('webpack-parallel-uglify-plugin');newparalleluglifyplugin(,
compress:
os = require('os'),
modules: {
loaders: [
test: /\.js|jsx$/,
exclude: /node_modules/
plugins: [
cache: true,
loaders: [{
path: 'babel',
query: {
cachedirectory: '.webpack_cache',
presets: [
'es2015',
'react'
//如果有單獨提取css檔案的話
loaders: ['style','css','less']
4.快取與增量構建
由於專案中主要使用的是react.js和es6，結合webpack的babel-loader載入器進行編譯，每次重新構建都需要重新編譯一次，我們可以針對這個進行增量構建，而不需要每次都全量構建。
babel-loader可以快取處理過的模組，對於沒有修改過的檔案不會再重新編譯，cachedirectory有著2倍以上的速度提公升，這對於rebuild 有著非常大的效能提公升。
var node_modules = path.resolve(__dirname, 'node_modules');
var pathtoreact = path.resolve(node_modules, 'react/react');
var pathtoreactdom = path.resolve(node_modules,'react-dom/index');
test: /\.js|jsx$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loaders: ['react-hot','babel-loader?cachedirectory'],
noparse: [pathtoreact,pathtoreactdom]
babel-loader讓除了node_modules目錄下的js檔案都支援es6語法，注意exclude: /node_modules/很重要，否則 babel 可能會把node_modules中所有模組都用 babel 編譯一遍!
當然，你還需要乙個像這樣的.babelrc檔案，配置如下：
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-runtime"]
這是一勞永逸的做法，何樂而不為呢？除此之外，我們還可以使用webpack自帶的cache，以快取生成的模組和chunks以提高多個增量構建的效能。
在webpack的整個構建過程中，有多個地方提供了快取的機會，如果我們開啟了這些快取，會大大加速我們的構建
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...
webpack打包檔案
webpack.config.js是自己建立的打包檔案 在檔案的跟目錄下 引用html webpack plugin 首先要 npm install html webpack plugin s 在命令列中執行一下 let path require path 引入這個檔案就不會把相對路徑變成絕對路徑 ...
webpack打包優化
tree shaking 使用import匯入的包，在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...