👆上一节我们讲可以通过 import() API 在 webpack 中进行代码分割，分割出一个新的 chunk，在浏览器中，将通过 JSONP 的方式加载该 chunk 的脚本。 而在 webpac

本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

项目上线前是专门针对 webpack 打包做了优化的，但是在之后做网络优化的时候通过webpack-bundle-analyzer这个插件发现一些公共的js文件重复打包进了业务代码的js中。这些代码体积虽然很小，但是为了将优化做到极致还是想要将其优化一下。这个过程最大的收获就是…

以上是引入了一个增加前缀的postcss插件，下面我们打包执行一下，看看是什么效果。 继续学习！这里先简单使用一下cssnext的语法，然后将其解析为正常的css语法。下图红框为cssnext语法，意为在根元素定义一个color变量为red，然后在a标签里使用该变量。 注：如果…