-
echarts.js文件也接近
1MB
-
moment.js也有
700KB
打包后js文件一共就5MB,这五个哥们就占了4M左右。不分析好还,一分析吓得够呛~
不要虚!找到刺了,一个一个来拔掉就好了。相信我拔掉的过程是很爽的。
一个一个解决,拔刺
把必须要用的第三方js通过cdn的方式引用
分析发现,elementui、echarts
是必须使用的,打包又耗时且页面加载也较慢得很。可以通过cdn
直接引入,方便且速度快。
element-ui
是我们项目用的主要框架,所以这个肯定是少不了,但是项目里面ant-design
为什么会存在呢,原来是发现有个页面使用了antd
的进度条组件,因为elementui
的进度条不太好看。但是没想到这样把整个antd
都导进来了。
方案:
-
舍弃
antd
组件,自己去找一个类似的vue
插件或者干脆自己实现一个。(这个方法短时间无法完成,且不想去动以前代码,暂不考虑) -
使用
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**
…其它配置
chainWebpack: config => {
config.plugin(‘ignore’)
//忽略/moment/locale下的所有文件
.use(new webpack.IgnorePlugin(/^./locale / , / m o m e n t /, /moment /,/moment/))
}
…其它配置
第二步:main.js
import moment from ‘moment’ //手动引入所需要的语言包
import ‘moment/locale/zh-cn’; // 指定使用的语言
moment.locale(‘zh-cn’);
这次我们看看moment
打包后多大:
只有174kb
了。不过,有一说一还是day.js
香~
做完上面这些动作我们的js文件总大小:3.04MB
,其中包含 1.3MB
的懒加载js,剩下的1.7MB
左右的js基本上不会对页面造成很大的卡顿。
还有进步空间?
1.通过 compression-webpack-plugin
插件把代码压缩为gzip。但是!需要服务器支持
webpack
端 vue.config.js
配置如下:
//打包压缩静态文件插件
const CompressionPlugin = require(“compression-webpack-plugin”)
//…其它配置
module.exports = {
//…其它配置
chainWebpack: config => {
//生产环境开启js\css压缩
if (isProduction) {
config.plugin(‘compressionPlugin’).use(new CompressionPlugin({
test: /.(js)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中…(img-r4WHpSo1-1715776188995)]
[外链图片转存中…(img-rTw5F6Gl-1715776188996)]
[外链图片转存中…(img-bElIpZ7n-1715776188996)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!