前端项目优化01
1. webpack-bundle-analyzer 文件打包模块可视化插件
该插件主要用于分析项目打包后的文件体积大小，
2.compression-webpack-plugin js文件gzip压缩插件
该插件主要是用gzip算法来进一步压缩js文件（压缩空间≈70&）
现有项目配置：
package.json
// 新增两个依赖
"devDependencies": {
"compression-webpack-plugin": "1.1.12", // 压缩
"webpack-bundle-analyzer": "^3.3.2", // 可视化
}
// 新增npm执行指令
"scripts": {
"build:gzip": "cross-env NODE_ENV=production GZIP=true webpack --progress --hide-modules", // 生产打包且初始化压缩环境变量
"analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --progress --hide-modules", // 生产打包且初始化可视化环境变量
}
webpack.config.js
模块导入：
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
var CompressionPlugin = require('compression-webpack-plugin')
模块配置：
if (process.env.ANALYZER) { // 可视化环境存在ANALYZER存在
module.exports.plugins = module.exports.plugins.concat(new BundleAnalyzerPlugin())
}
if (process.env.GZIP) { // 文件压缩环境存在ANALYZER存在
module.exports.plugins = module.exports.plugins.concat(new CompressionPlugin({
algorithm: 'gzip',
test: /\.js/,
deleteOriginalAssets: true
}))
}
注释：
webpack3对应的compression-webpack-plugin版本只能是1.1.2
webpack4对应的compression-webpack-plugin版本^2.0.0
更新早上说的配置的一个问题，变更这个配置的原因主要是，怕nginx服务器那边没开启gzip功能，如果只打包.gz的文件，会导致访问异常，所以去掉这个属性会打包两份js代码，一份 .js ，一份是.js.gz，nginx服务器会根据相关配置来读取.js还是.js.gz的文件
.jpg)