zoukankan      html  css  js  c++  java
  • 如何利用webpack来优化前端性能?如何提高webpack的构建速度?

    用webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运行快速高效。

    1.压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件, 利用cssnano(css-loader?minimize)来压缩css
    2.利用CDN加速。在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
    3.删除死代码(Tree Shaking)。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
    4.提取公共代码。

    如何提高webpack的构建速度?

    1.多入口情况下,使用CommonsChunkPlugin来提取公共代码
    2.通过externals配置来提取常用库
    3.利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。
    4.使用Happypack 实现多线程加速编译
    5.使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
    6.使用Tree-shaking和Scope Hoisting来剔除多余代码
    7.使用高版本的 Webpack 和 Node.js
    8.图片压缩 配置image-webpack-loader
    9.充分利用缓存提升二次构建速度

      

  • 相关阅读:
    Spring Security 自动装配
    Mysql学习
    java 学习路线(bilibili)
    Mac上配置idea的项目上传到GitHub
    vim安装自动补全插件
    spring aop 获取request、response对象
    centos7配置本地yum源 使用安装镜像安装软件
    eclipse启动速度优化
    spring-mvc springboot 使用MockMvc对controller进行测试
    java web 验证码-字符变形(推荐)
  • 原文地址:https://www.cnblogs.com/liumcb/p/13847056.html
Copyright © 2011-2022 走看看