减少Webpack捆绑包的尺寸以进行生产

从这里开始没有介绍。

使用正确的环境变量

new webpack.DefinePlugin({
 ‘process.env’: {
 ‘NODE_ENV’: ‘production’ 
 }
})

2.使用生产参数

webpack -p

3.高级丑化

new UglifyJSPlugin({
 // options
})

4.优化依赖项导入

而不是导入完整的依赖项：

import _ from ‘lodash’;

只需导入您真正需要的内容：

import _ from ‘lodash/core’;

5.使用 Bundle Analyzer 找出增加大小的原因

例如，大多数时候我们应该忽略区域设置文件

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

6.从供应商中提取供应商

module.exports = {
 …,
 entry: {
 app: ‘./src/index.js’,
 vendor: [‘react’, ‘moment’, ‘lodash/core’]
 },
 …,
 plugins: [
 …,
 new webpack.optimize.CommonsChunkPlugin({
 name: ‘vendor’
 })
 ]
};

7.从供应商中提取供应商

module.exports = {
 …,
 module: {
 rules: [
 …,
 // css
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 fallback: ‘style-loader’,
 use: [‘css-loader’]
 })
 }
 ]
 },
 plugins: [
 …,
 new ExtractTextPlugin(‘style.css’),
 ]
};

8.代码按路线划分

我的一个项目的每步结果

再见。

From: https://hackernoon.com/reduce-webpack-bundle-size-for-production-880bb6b2c72f

减少Webpack捆绑包的尺寸以进行生产

相关推荐