异步路由长啥样？ 原理不做过多介绍（大家都知道），直接上代码了 一般来说，只有SPA需要异步路由。当配置了异步路由，通过split chunk，打包后都会生成单独的chunk，以webpack为例，建

webpack4之前，大家一直都是用CommonsChunkPlugin来做代码切割。那用他具体有什么坑呢？ 我用起来感觉最诡异的点就是每次切割之后，新生成的chunk会和被提取的chunk生成一种父子关系(生成的公共chunk为entry chunk,之前有写过一篇文章介绍)…

hello~亲爱的看官老爷们大家好~ 最近一直在学习 webpack 的相关知识，当清晰地领悟到 webpack 就是不同 loader 和 plugin 组合起来打包之后，只作为工具使用而言，算是入门了。当然，在过程中碰到数之不尽的坑，也产生了想要深入一点了解 webpack…

升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。 程序每次升级后，用户都不会因为缓存问题而执行的仍然是老的程序。 若程序没升级，用户对静态资源的请求则能用到缓存。 由于vue脚手架每次打包时，都…

想要实时查看打包变化，可以通过一个打包分析利器。webpack-bundle-analyzer chunk: 含义是拆分模块的范围，它有三个值async、initial和all。 假如我先建立一个btest文件，再建立一个atest文件，进行打包后，发现btest的文件的has…

这里以vue项目为例，配置包括但不限于vue项目。其他项目按类似逻辑配置基本一样。 分析：通过把类似 echart、element-ui、lodash 等第三方依赖库单独提取出，从而减小打包的体积大小，关键属性 externals 配置后的依赖插件不会被打包进 chunk 。而…

在我们的项目中，如果使用了es6的语法和API时就要用到babel对这些语法进行转化，使代码可以在低版本的浏览器上正常运行。 因为单独使用babel-loader是不能对es6的语法进行解析的，需要配合babel-preset-env。 依然报错，但是报错信息发生了变化，因为b…