羊蹓狼 发表于 2024-7-31 14:55:59

提拔开辟服从的5个webpack插件


[*]Vue-lazyload   图片懒加载插件:vue-lazyload
[*]Image-webpack-loader   图片压缩插件:image-webpack-loader,npm install image-webpack-loader,在vue.config.js中设置,设置压缩比率,如0.7
Config.module
  .rule(‘images’)
  .use(‘image-webpack-loader’)
  .loader(‘image-webpack-loader’)
3,  sprites  精灵图自动合成插件:sprites, 安装sprites插件, 1:设置中添加 精灵图地点,2,在代码中直接引用图片,例:‘assets/images/sprites/logo.png’
4,  px转rem   自顺应屏幕。Viewport插件:
5,remove-console   生成环境中控制台不打印console.log
   安装 remove-console插件
   在设置里设置,假如是生成环境则使用去掉console的插件
另外,productionSourceMap:false   生产环境调试工具source-map
   因生产环境代码被压缩,转译。而source map是将编译,打包后的代码映射回源代码的过程。
   Sourcemap配合chrome可以提供一个debug线上项目标功能。只在打开控制台时才加载。
   设置中: productionSourceMap:false
   打开控制台右击add source map,出现webpack://,就可以调试对应的源码。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 提拔开辟服从的5个webpack插件