1、项目优化之js的剥离
在项目中采用js是必不可少的。但是我们在引用js的时候需要注意。不要把不需要的部分也引入进去。比如:在index.js中有A、B两个方法。在a.html(vue)中只用到A方法;而在b.html(vue)中只用到B方法。这时就可以把A、B两个方法分开写。在对应的文件才引入。这样就可以避免打包在一起的情况。
2、copyWebpackPlugin自动拷贝配置
在我们开发过程中,打包的时候如果缺失哪些文件。就可以采用这个plugin完成拷贝
3、MiniCssExtractplugin CSS剥离
在打包过程中,如果把css文件全部打包到了js文件下,会导致js文件过大。这个时候我们可以采用这个plugin对css进行压缩和从js文件中分离。我们需要在webpack配置文件中修改两个地方。 1、对loader进行改动,把 style-loader 改成 MiniCssExtractplugin.loader。因为style-loader是采用添加dom的方式。而 MiniCssExtractplugin.loader 是对css进行剥离的
2、需要在plugin中使用 MiniCssExtractplugin
4、js&css压缩+treeshaking特性(uglifyjs-webpack-plugin[js压缩] & css-minimizer-webpack-plugin[css压缩])
1、在webpack中的 optimization 在这属性中进行压缩和剥离都在这完成的,minimize这个选项是可以在dev模式下进行压缩,在minimizer这边配置压缩的插件。
2、treeshaking必须采用EsModule才能触发的,就是没有用到的js就不会被打包。但在同一个文件中有一定的触发条件,就是mode要为production
5、splitChunck特性(进行js代码的分割)
具体参数配置可以查看webpack官网。cacheGroups这个属性是你需要针对某个包要进行单独打包的(如图是对js单独打包)