zoukankan      html  css  js  c++  java
  • webpack构建速度优化-记录一次公司项目build优化(不完全记录)仅供翻阅参考

    打包速度 转化AST—>遍历树—>转化回代码(具体语法配置参考webpack,这边只是个人的一些过程记录,并不包含详细过程)
    1、缓存 cache-loader
    2、多核 happypack threads
    3、抽离 DllPlugin、externals
    4、拆分 Docker

    优化项目:测量插件speed-measure-webpack-plugin

    用法:

    优化前:可以看到我们公司的项目还是比较残暴的!!开启AOT(Angular5项目)之后,线上构建达到了41分钟!

    测量出现的问题:raw-loader、css-loader、sass-loader、file-loader、to-string-loader等loader报红,优先处理。
    由于raw-loader、file-loader使用 cache-loader有问题,暂时不处理这两个loader的缓存

    1、开启相对费时间,开销大的loader进行缓存处理,这边用到了webpack的cache-loader。

    2、使用happypack开启多线程 对开销较大的模块进行翻译。以及UglifyJsPlugin开启cache和parallel提高压缩效率。

    id即为对应的loader表示,对应happypack/loader?id=xxx即可,如果想同时开启cache-loader和happypack,在loaders前加入即可,如['cache-loader',...loaders]

    3.使用DllPlugin动态链接库把开销较大的第三方库抽离出来,并且在webpack.prod.config.js使用DllReferencePlugin引入即可。

    抽离第三方库

    scriprt配置: "build:dll": "npm run webpack -- --config config/webpack.dll.config.js --progress",

    require mainfest.json

    然后就报错了,还没有解决 (Angular5项目,走平常的build一点问题没有,不知道为什么会出现这个问题,动态loadChildren懒加载模块这些can't find,不知道为什么)。

    ps: 我这边不知道为什么死活报can't resolve ....modules报错,故此没解决这个问题。但是思路是这个样子的。等下次再试试。

    // 上面这个问题can't resolve ....modules报错的原因是因为漏写了--config指定需要webpack的文件,从而导致走了默认的config.js,因而报错。

    参考:https://juejin.im/post/5bceb2e8e51d457ac752f878 

    最后的结果!!develop、test环境因为没有开启AOT模式,如果没有提交功能性迭代代码,由平常的7分钟提升到2分50秒!!

    而不幸的是,框架因为用的是Angular5版本,并没lvy,Angular v6 的新一代渲染器,因为打包的速度达到41分钟!优化完之后到达了30分钟左右。可见做了这些效果还是很明显的。

    希望以后能进一步优化!

  • 相关阅读:
    python 正则表达式练习题
    python2与Python3的区别
    Python :生成一个1到50的大字符串,每个数字之间有个空格 1 2 3 4 ..........50
    关于实现今天到一年中任意一天两者之间的天数差的计算
    Window下pip的安装
    Pycharm中Git、Github的简单使用和配置
    Python中字符串操作函数string.split('str1')和string.join(ls)
    实现无密码远程登陆另一台机器
    我的第一篇博客
    String类型转List<Integer>
  • 原文地址:https://www.cnblogs.com/chenfengami/p/12623876.html
Copyright © 2011-2022 走看看