angular项目打包优化

webpack打包压缩混淆_Webpack打包后体积过大的优化思路

1.去除devtool选项

这只适用于开发环境，这会造成打包的文件往往有几M，所以在生产环境必须去除此配置。

2.分离CSS

安装插件：

npm install extract-text-webpack-plugin --save

var ExtractTextPlugin = require("extract-text-webpack-plugin");

...

loaders:[

{

test: /\.css$/,

loader: ExtractTextPlugin.extract("style-loader", "css-loader")

},

{

test: /\.less$/,

loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")

},

...

...

plugins: [

...

new ExtractTextPlugin("bundle.css")

]

3.使用webpack.optimize.UglifyJsPlugin插件压缩混淆JS代码

使用命令：webpack -p

在webpack.config.js文件的plugins数组里面添加及配置插件，具体配置参考UglifyJS2文档

new webpack.optimize.UglifyJsPlugin({

warnings: false,

compress: {

join_vars: true,

warnings: false,

},

toplevel: false,

ie8: false,

}),

4.切换到产品环境

在plugins中添加插件

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: JSON.stringify(process.env.NODE_ENV),

},

}),

打包时运行：

set NODE_ENV=production && webpack -p

5.分离第三方库

在plugins中加入

new webpack.optimize.CommonsChunkPlugin({

filename:"common.js",

name:"commons"

});

6.按需打包Lodash

使用Lodash时，往往只需要使用其中部分功能，但整个文件引入是不合理的，我们需要通过插件让Webpack按需引入模块。

配置webpack.config.js

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

var webpack = require('webpack');

module.exports = {

module: {

loaders: [{

loader: 'babel',

test: /\.js$/,

exclude: /node_modules/

}]

},

babel: {

presets: ['es2015'],

plugins: ['transform-runtime', 'lodash']

},

plugins: [

new LodashModuleReplacementPlugin,

new webpack.optimize.OccurrenceOrderPlugin,

new webpack.optimize.UglifyJsPlugin

]

}

7.异步加载模块

对于直接require或import的模块，Webpack的做法是把依赖的文件都打包在一起，造成文件很臃肿。

所以在写代码的时候要注意适度同步加载，同步的代码会被合成并且打包在一起。

异步加载的代码会被分片成一个个chunk，在需要该模块时再加载，即按需加载。

require.ensure([], function(require){

var list = require('./list');

list.show();

}, 'list');
————————————————
版权声明：本文为CSDN博主「weixin_39712969」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39712969/article/details/111755310

2. webpack dll方式打包

https://www.jianshu.com/p/a5b3c2284bb6