前端知识18:环境的优化(开发的HMR热替换以及生产的去除项目死代码)

最新推荐文章于 2024-05-11 23:41:35 发布

没有女朋友的程序员

最新推荐文章于 2024-05-11 23:41:35 发布

阅读量333

点赞数 1

文章标签：前端 webpack javascript

本文链接：https://blog.csdn.net/weixin_41380194/article/details/122514262

版权

本文介绍了前端开发中的优化策略，包括使用Webpack的HMR（模块热替换）提升开发效率，详细阐述了如何配置和实现HMR功能，以及在生产环境中如何利用Webpack的tree-shaking去除未使用的JS代码，进一步减小包的大小。此外，还提及了通过purgecss-webpack-plugin来删除无用CSS，以优化BootStrap等库的大小。

摘要由CSDN通过智能技术生成

开发环境的优化：打包构建速度以及优化代码调试
生产环境的优化：代码运行的性能

开发环境之优化代码调试
HMR（模块热替换）
模块热替换(Hot Module Replacement 即MHR)是wepack提供的最有用的功能之一，他雨荨在运行时更新各个模块，而且无需进行完全刷新。
启动这个功能，只需要修改一下webpack.cofig.js的配置。使用webpack内置的HMR插件就可以了，在devServer中使用hot参数。
启用webpack内置的HMR插件后，module.hot接口就会暴露在index.js中，接下来需要在index.js中配置告诉webpack接受HMR的模块。
1.样式HMR功能，在开发环境中使用style-loader
2.HTM的HMR功能，默认也没有HMR功能（不用做HMR功能），需要在entry入口中引入html文件。
3.js的HMR功能，默认没有HMR功能，只能处理非入口文件的js文件

1.在devServer中加入：hot:true 得重新启动项目
2.html更改后不能更新，需要将html加入入口文件中。即 entry:’./src/hello.html’
3.css更改后所有的csss都会更新，只想更新改变的css，这样在webpack.config.js文件中的rules中的MiniCssExtractPlugin.loader 换为style-loader。需要重新启动。
4.js文件，除了入口文件外其余文件可以做到修改那个更新哪个。需要在入口文件中加入如下代码：
if(module.hot){
module.hot.accept(’./print.js’