美文网首页
如何提升Webpack构建速度

如何提升Webpack构建速度

作者: 杭州程序员小陈 | 来源:发表于2021-07-15 09:18 被阅读0次

    通过externals配置来提取常用库
    利用DllPlugin和DllReferencePlugin预编译资源模块,通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。
    使用Happypack 实现多线程加速编译
    要注意的第一点是,它对file-loader和url-loader支持不好,所以这两个loader就不需要换成happypack了,其他loader可以类似地换一下
    使用Tree-shaking和Scope Hoisting来剔除多余代码
    使用fast-sass-loader代替sass-loader
    babel-loader开启缓存
    babel-loader在执行的时候,可能会产生一些运行期间重复的公共文件,造成代码体积大冗余,同时也会减慢编译效率可以加上cacheDirectory参数或使用 transform-runtime 插件试试
    不需要打包编译的插件库换成全局"script"标签引入的方式
    比如jQuery插件,react, react-dom等,代码量是很多的,打包起来可能会很耗时
    可以直接用标签引入,然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量
    优化构建时的搜索路径
    在webpack打包时,会有各种各样的路径要去查询搜索,我们可以加上一些配置,让它搜索地更快
    比如说,方便改成绝对路径的模块路径就改一下,以纯模块名来引入的可以加上一些目录路径
    还可以善于用下resolve alias别名 这个字段来配置
    还有exclude等的配置,避免多余查找的文件,比如使用babel别忘了剔除不需要遍历的

    相关文章

      网友评论

          本文标题:如何提升Webpack构建速度

          本文链接:https://www.haomeiwen.com/subject/sudppltx.html