溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
以前一直使用 create-react-app 這個腳手架進行 react 開發，后面因為一些自定義的配置，轉而使用 webpack 搭建一套自己的腳手架。但是在使用 webpack 打包之后發現，納尼？怎么文件這么大？？？ 于是研究了一下如何處理 webpack 打包之后文件太大的情況，簡單記錄下來。
首先配置全局變量
首先，通過指定環境，告訴 webpack 我們當前處于 production 環境中，要按照 production 的方式去打包。
//指定環境，將process.env.NODE_ENV環境與library關聯
new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
優化 devtool 中的 source-map .
dev-tool 提供了很多種選項，用來增強我們 debug 的能力，我們熟知的有： source-map , inline-source-map , cheap-source-map 等等。詳細的用法可以參考Devtool官方文檔，Devtool配置對比 ， webpack sourcemap 選項多種模式的一些解釋 ， https://webpack.github.io/docs/configuration.html#devtool 如果你的文件在打包之后突然變成好幾M，那么不用想，肯定是因為 source-map 的原因。 source-map 在開發階段確實很好用，調試起來很方便，但是在生產環境下就沒必要部署了。 建議在 prod 環境下關閉 source-map 。
剝離css文件，單獨打包
安裝 webpack 插件 extract-text-webpack-plugin 。 npm install extract-text-webpack-plugin --save-dev 。 使用方法：
plugins:[
new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]
這里使用了 contenthash ， webpack 會根據內容去生成 hash 值。
使用 UglifyJSPlugin 壓縮。
通過 UglifyJSPlugin 可以壓縮我們的 *.js 文件。 安裝方法: npm install uglifyjs-webpack-plugin --save-dev 。 用法： UglifyJSPlugin詳細用法
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJSPlugin({
parallel: 4,
uglifyOptions: {
output: {
comments: false,
beautify: false,
},
compress: {
warnings: false
},
},
cache: true,
}),
]
}
提取公共依賴
使用 CommonsChunkPlugin 插件，將多個 js 文件進行提取，建立一個獨立的文件。這個文件包含一些共用模塊，瀏這樣覽器只在剛開始的時候加載一次，便緩存起來供后續使用。而不用每次訪問一個新界面時，再去加載一個更大的文件。
entry:{
app:'./entry',
vendor:['react','other-lib'],
},
plugins:[
new Webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
]
開啟gzip壓縮
我們使用 compression-webpack-plugin 插件進行壓縮。 安裝： npm install compression-webpack-plugin --save-dev 。 compression-webpack-plugin 詳細用法 使用：
const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
asset: '[path].gz[query]', //目標資源名稱。[file] 會被替換成原資源。[path] 會被替換成原資源路徑，[query] 替換成原查詢字符串
algorithm: 'gzip',//算法
test: new RegExp(
'\\.(js|css)$' //壓縮 js 與 css
),
threshold: 10240,//只處理比這個值大的資源。按字節計算
minRatio: 0.8//只有壓縮率比這個值小的資源才會被處理
})
]
壓縮結果：
開啟html壓縮，自動添加上面生成的靜態資源
添加插件 html-webpack-plugin
安裝： npm install html-webpack-plugin --save-dev 用法：
plugins:[
new HtmlWebpackPlugin({
title: '',
template: __dirname + '/../public/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
chunksSortMode:'dependency'
}),
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
