打包后文件太大优化

打包后的JS要是很大,该怎么解决?

1.压缩 UglifyJsPlugin插件

2.按需加载

3.剥离了css文件

4.开启了gzip压缩

OccurenceOrderPlugin :为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID

UglifyJsPlugin:压缩JS代码;

ExtractTextPlugin:分离CSS和JS文件

使用 Webpack 优化项目

对于 Webpack4,打包项目使用 production 模式,这样会自动开启代码压缩

使用 ES6 模块来开启 tree shaking,这个技术可以移除没有使用的代码

优化图片,对于小图可以使用 base64 的方式写入文件中

按照路由拆分代码,实现按需加载

给打包出来的文件名添加哈希,实现浏览器缓存文件

Table of Contents