webpack优化项目总结

简述webpack

webpack是用来做什么的？

本质上，webpack是一个现代化javascript应用程序的静态模块打包器（module bundler），是一种实现前端模块化的构建工具， 在前端模块化进程上有着重要的地位

webpack是怎么工作的？

当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）， 其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

webpack的核心概念是什么？

• 入口(entry)

• 输出(output)

• loader

• 插件(plugins)

下一步

熟悉了这些概念之我们将使用webpack从两个方面来优化我们的项目；因为细节内容太多，这里暂时不会对某个plugins或loader进行深入讲解

项目背景

1. 使用vue-cli1搭建， 使用了element-ui作为UI控件的后台管理平台
2. 在没有更改vue-cli构建配置之前，npm run start启动时间为 65s - 90s， npm run build时间为120s~140s
3. 使用webpack4进行优化， 优化之后npm run start40~50s，npm run build40s-50s，

优化打包速度

主要思路是提取不变文件，减少打包源文件总体体积

1. 关闭开发工具(source-map严重影响js打包体积大小， 还会造成项目源文件暴露)

   devtool: false,
   

2. 提取不变文件

   • extenals // 不变文件cdn 打包，如jquery， react， vue等等 （优先使用，cdn文件需要进行锁版本）

   • dllplugins // 提取不变库，减少打包文件（针对于没有cdn源的npm包）

3. 多进程loader编译

   • thread-loader // 多进程运行loader, 针对于js，vue 等非常消耗资源的文件

4. 缓存loader编译的文件

   • cache-loader // 缓存js,vue等非常消耗资源的文件进行缓存

5. 多进程缓存文件压缩

   • TerserPlugin // 多进程缓存压缩文件

优化用户体验

主要思路是分离chunk，减少entry主包文件大小，模块懒加载减少白屏时间

1. 使用require.ensure, import 进行模块的懒加载（详见懒加载）

2. 使用gzip缓存js，css文件

3. 使用MiniCssExtractPlugin进行css文件提取

4. 使用splitChunks中的minSize， maxSize对chunk模块进行分割

5. 组件，js，css的按需加载