【包真】我的第一次webpack优化，首屏渲染从9s到1s

module.exports = {

productionSourceMap: !isProduction, //关闭生产环境下的SourceMap映射文件

css: {

sourceMap: !isProduction, // css sourceMap 配置

loaderOptions: {

…其它代码

}

},

…其它代码

}

此时再npm run build 打包，就会发现速度快了很多，体积瞬间只有几兆了！

2.分析大文件，找出内鬼

安装 npm install webpack-bundle-analyzer -D 插件，打包后会生产一个本地服务，清楚的展示打包文件的包含关系和大小。

vue.config.js 配置：

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin

module.exports = {

…其它

configureWebpack: [

plugins: [

new BundleAnalyzerPlugin() // 分析打包大小使用默认配置

]

},

…其它

}

自动弹出一个服务，清晰的展示打包后js的文件大小：

通过图中可以发现：

1. element-ui和ant-design占了近1/4的大小：1.53MB。

2. exceljs也是个大东西有：1.3MB

3. echarts.js文件也接近1MB

4. moment.js也有700KB

打包后js文件一共就5MB，这五个哥们就占了4M左右。不分析好还，一分析吓得够呛~

不要虚！找到刺了，一个一个来拔掉就好了。相信我拔掉的过程是很爽的。

一个一个解决，拔刺

把必须要用的第三方js通过cdn的方式引用

分析发现，elementui、echarts是必须使用的，打包又耗时且页面加载也较慢得很。可以通过cdn直接引入，方便且速度快。

element-ui是我们项目用的主要框架，所以这个肯定是少不了，但是项目里面ant-design为什么会存在呢，原来是发现有个页面使用了antd的进度条组件，因为elementui的进度条不太好看。但是没想到这样把整个antd都导进来了。

方案：

1. 舍弃antd组件，自己去找一个类似的vue插件或者干脆自己实现一个。（这个方法短时间无法完成，且不想去动以前代码，暂不考虑）

2. 使用antd部分加载。只加载想要的进度条组件，可以减少文件体积（这个方法简单粗暴，就是牺牲一些文件大小）。

我们使用方案2，根据antd官方的文档配置部分组件的引入。

安装 npm install babel-plugin-import -D

1. main.js导入需要的组件 Step

import { Steps } from ‘ant-design-vue’;

Vue.component(Steps.name, Steps);

Vue.component(Steps.Step.name, Steps.Step);

2. babel.config.js 加上配置：

module.exports = {

presets: [ ‘@vue/cli-plugin-babel/preset’ ],

//以下是按需加载的配置++++

plugins: [

[

“import”,

{

libraryName: “ant-design-vue”,

libraryDirectory: “es”,

style: true

}

]

]

}

此时再分析，antd已经小了很多。

2.使用cdn加载第三方js。

我们项目里面第三方js很多，有些打包下来会很大，而且加载速度较慢。我们把这些js分离出来，通过cdn的方式在html中的script标签中直接使用，一方面减少打包体积，一方面提高了加载速度。

这里推荐一个免费的cdn: BootCDN。也可以使用自己购买的付费cdn服务，我们到网站搜索自己项目需要的js。例如：vue

注意，一定要选择自己项目对应的版本，否则会出现各种奇怪的问题

我的项目使用的是 "vue": "^2.6.12", （package.json）

第一步：配置vue.config.js，让webpack不打包这些js，而是通过script标签加入。

const isProduction = process.env.NODE_ENV === ‘production’ // 判断是否是生产环境

//正式环境不打包公共js

let externals = {}

//储存cdn的文件

let cdn = {

css: [

‘https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css’ // element-ui css 样式表

],

js: []

}

//正式环境才需要

if (isProduction) {

externals = { //排除打包的js

vue: ‘Vue’,

‘element-ui’: ‘ELEMENT’,

echarts: ‘echarts’,

}

cdn.js = [

‘https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js’, // vuejs

‘https://cdn.bootcdn.net/ajax/libs/element-ui/2.6.0/index.js’, // element-ui js

‘https://cdn.bootcdn.net/ajax/libs/element-ui/2.6.0/locale/zh-CN.min.js’,

‘https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js’,

]

}

module.exports = {

//…其它配置

configureWebpack: {

//常用的公共js 排除掉，不打包 而是在index添加cdn，

externals,

//…其它配置

},

chainWebpack: config => {

//…其它配置

// 注入cdn变量 (打包时会执行)

config.plugin(‘html’).tap(args => {

args[0].cdn = cdn // 配置cdn给插件

return args

})

}

//…其它配置

}

第二步：html模板中加入定义好的cdn变量使用的代码

<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>

<% } %>

<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>

<% } %>

可以发现cdn.js中，我把vue、echarts、element-ui这三个大头加入了。在externals对象中左侧是npm包的名称，右侧是在代码中暴露的全局变量。注意element-ui对应的是 ELEMENT。

没有ant-design-vue是因为我们上面使用了部分加载的方式，如果使用cdn这种方式是加载全部的代码，有点浪费。

没有使用exclejs，是因为exceljs在我的业务代码中不是直接引用的，而是一个叫table2excel间接依赖的。所以就算我通过上面的方法排除掉它，在打包的时候还是会通过table2excel的依赖找到它并打包。

那这种不可避免的情况，该如何优化，让加载速度不受影响呢？

答案是通过懒加载的方式：

• 1.script标签中注释掉 import Table2Excel from “table2excel.js”;

• 2.下载的方法中：download(){

1.script标签中注释掉 import Table2Excel from “table2excel.js”;

2.下载的方法中：

download(){

//使用import().then()方式

import(“table2excel.js”).then((Table2Excel) => {

new Table2Excel.default(“#table”).export(‘filename’) //多了一层default

})

}

这样在进入系统时，不会加载Table2Excel 和exceljs，当需要时才会去加载，第一次会慢一点，后面就不需要加载了，会变快。

• 3 moment.js的优化

我们发现monentjs在项目中有使用来对时间格式化，但是使用频率并不高，完全可以自己实现一个format方法，或者使用只有6kb的day.js.

但这里我们暂不替换，把moment变得瘦小一些即可，删除掉除中文以外的语言包。

第一步：**vue.config.js**

…其它配置

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-y8vW3OO2-1715045924348)]

[外链图片转存中…(img-SqEMJc8C-1715045924349)]

[外链图片转存中…(img-Z6LwN5s7-1715045924349)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！