随着 SPA (Single Page Application) 应用的流行,前端应用的打包时间也越来越长。Webpack 是一个常用的前端打包工具,本文将会介绍一些提高 SPA 应用打包速度的 Webpack 配置技巧。
减少包的体积
压缩代码
压缩代码是减少包体积的最基本的方法之一。Webpack 内置了压缩插件 UglifyJsPlugin
,可以在生产环境中使用。
----- -------------- - ----------------------------------- -------------- - - ----- ------------- ------------- - ---------- ---- ------------------ -- --
Tree shaking
Tree shaking 是一种消除无用代码的技术,能够大幅减少打包出的代码体积。需要使用 ES6 的模块化语法,并且在 Webpack 中配置 optimization.usedExports
和 optimization.sideEffects
。
-------------- - - ----- ------------- ------------- - ------------ ----- -- -- ---- ------- ------------ ------ -- ---------------- ---- ------- -- --
按需加载
按需加载能够在应用中加载所需的代码,而不必加载整个应用。在 Webpack 中使用 code splitting
和 dynamic import
来实现按需加载。
缩短构建时间
缓存
使用 Webpack 的缓存功能可以缩短构建时间。在 Webpack 中配置 cache
和 hardSourceWebpackPlugn
插件即可。
----- ----------------------- - -------------------------------------- -------------- - - ------ ----- -- ---- -------- ---- --------------------------- -- -- -------------------------- -- --
并发
使用并发可以让打包过程更加快速。在 Webpack 中配置 parallelism
、workers
和 threadPool
即可。
-------------- - - ------------ -- -- ------ -------- -- -- ------ -- ----------- ----- -- -- ---------- --
优化 loader
优化 loader 可以让打包速度更快。可以使用 cacheDirectory
缓存 loader 的结果,并使用 thread-loader
和 happypack
配置实现并发执行 loader。
-------------- - - ------- - ------ - - ----- -------- ---- - - ------- --------------- -------- - --------------- ----- -- ---- -- -- - ------- ---------------- -------- - -------- -- -- ------ --------- -- -- -- -- -- -- --
总结
通过减少包的体积和缩短构建时间,可以让 SPA 应用的打包速度更快。使用 Webpack 的缓存、并发和优化配置可以优化 SPA 应用的打包速度。不同的优化技巧可以互相结合,提高应用性能。
参考链接:
Webpack 4 Tutorial: from 0 Conf to Production Mode Advanced Webpack configuration techniques
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645c936f968c7c53b0efe9de