简述webpack
webpack是用来做什么的?
本质上,webpack是一个现代化javascript应用程序的静态模块打包器(module bundler),是一种实现前端模块化的构建工具, 在前端模块化进程上有着重要的地位
webpack是怎么工作的?
当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph), 其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
webpack的核心概念是什么?
-
入口(entry)
-
输出(output)
-
loader
-
插件(plugins)
下一步
熟悉了这些概念之我们将使用webpack从两个方面来优化我们的项目;因为细节内容太多,这里暂时不会对某个plugins或loader进行深入讲解
项目背景
- 使用vue-cli1搭建, 使用了element-ui作为UI控件的后台管理平台
- 在没有更改vue-cli构建配置之前,npm run start启动时间为 65s - 90s, npm run build时间为120s~140s
- 使用webpack4进行优化, 优化之后npm run start40~50s,npm run build40s-50s,
优化打包速度
主要思路是提取不变文件,减少打包源文件总体体积
-
关闭开发工具(source-map严重影响js打包体积大小, 还会造成项目源文件暴露)
devtool: false,
-
提取不变文件
-
extenals // 不变文件cdn 打包,如jquery, react, vue等等 (优先使用,cdn文件需要进行锁版本)
-
dllplugins // 提取不变库,减少打包文件(针对于没有cdn源的npm包)
-
-
多进程loader编译
- thread-loader // 多进程运行loader, 针对于js,vue 等非常消耗资源的文件
-
缓存loader编译的文件
- cache-loader // 缓存js,vue等非常消耗资源的文件进行缓存
-
多进程缓存文件压缩
- TerserPlugin // 多进程缓存压缩文件
优化用户体验
主要思路是分离chunk,减少entry主包文件大小,模块懒加载减少白屏时间
-
使用require.ensure, import 进行模块的懒加载(详见懒加载)
-
使用gzip缓存js,css文件
-
使用MiniCssExtractPlugin进行css文件提取
-
使用splitChunks中的minSize, maxSize对chunk模块进行分割
-
组件,js,css的按需加载