前端之webpck的优化

一、webpack的打包流程/webpack的机制/原理/webpack是怎么打包的

1 webpack是根据运行的指令来决定一个基本的业务流程
2 如果是build 就是执行打包，如果是 配合了devServer就是就行本地化的调试。 两者其实在本质上没有太大区别，只是devServer会运行一个node服务器来进行本地化调试，打包的文件只是临时的缓存。
3 确定入口：在配置文件当中我们会指定一个入口文件（entry)
4 编译模块： 根据入口文件，遍历他所有的引入的文件。然后根据不同的文件类型使用不同的loader或者是对应的插件进行处理，而且在文件当中的其他引入会依次递归寻找。重复同样的流程。
5 完成编译：loader和插件对于我们的各种的引入模块进行编译处理最终形成一个有效的文件依赖。
6 输出资源： 根据入口和各模块之间的依赖关系， 组装成一个个包含多个模块的chunk,再把每个chunk转换成一个单独的文件加入到输出列表。
7 文件生成: 最终我们会把这些确定好到要打包的文件 写入到我们的文件系统当中。

二、cdn优化

原先我们使用一个包的方式都是 npm i 安装包。然后 import 到代码里面使用。 这样做会导致对应的包也会被打包到我们的js当中。 会增加了我们的打包的压力和大小。所以对于一些体积较大 但是比较稳定的包，我们应该直接使用cdn加速服务来处理(意思就是我们在上线的时候 通过html代码引入这个 js包使用即可，而不是打包到我们的js当中。） 所以这些成熟的而且提交较大的类库我们其实可以放到cdn服务器上面，所以我们配置webpack区忽略这些包的打包。

webpack排除打包

{
  ...其他配置,
  externals:{
    'vue':'Vue',
    'element-ui':'ELEMENT',
    'xlsx':'XLSX'

}
1
2
3
4
5
6
7
8

cdn服务器上的地址注入到模板当中

三、使用 module.noParse

假设我们不采用cdn引入一些公共的类库比如说 ecahrt或者是 jquery等等这些，但是我们又在我们的代码里面进行了引入，默认情况下webpack还是会对这些引入的库进行解析处理。这些包的其实都是很稳定而且比较庞大的包，webpack去解析这些文件耗时又没有实际的意义，因为我们基本不会改动里面的内容。

所以我们可以主动的去配置 告诉webpack哪些文件不需要去解析

 module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/
  }
1
2
3