Vue项目打包后体积优化
程序员文章站
2024-02-10 16:09:10
...
背景
这段时间使用Vue+Typescript完成了对公司用户管理系统的重构,替换掉了之前的JSF实现了准前后端分离。
目前还没有采取前端独立部署的模式,前端文件打包后需要放到tomcat中进行访问。
公司的服务器带宽100M,希望系统能支持500并发,且没有购买CDN服务。对于打包后的前端文件chunk-vendors.js
就达到了900kb,急需优化。
解决
-
路由懒加载
参考文章:vue项目实现路由按需加载(路由懒加载)的3种方式、@babel/plugin-syntax-dynamic-import
-
安装依赖:
yarn add @babel/plugin-syntax-dynamic-import --dev
-
修改
vue-router
component: () => import( /* webpackChunkName: "login" */ '../views/Login.vue')
-
babel添加配置:
// babel.config.js presets: [ '@vue/cli-plugin-babel/preset', ['@babel/preset-env', //添加 babel-preset-env 配置 { 'modules': false } ] ] plugins: [ [ 'component', { 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' }, 'syntax-dynamic-import' ] ]
-
-
资源按需加载(ElementUI按需引入)
参考文章:element-ui官方文档
- 安装依赖:
yarn add babel-plugin-component --dev
- babel添加配置:见上一步
- 在项目中按需引入ElementUI
- 安装依赖:
-
使用gzip
-
安装依赖:
yarn add compression-webpack-plugin
-
webpack添加配置:
// vue.config.js configureWebpack: () => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型 threshold: 10240, // 归档需要进行压缩的文件大小最小值,我这个是10K以上的进行压缩 deleteOriginalAssets: false, // 是否删除原文件 minRatio: 0.8 }) ] } } }
-
若部署到tomcat,需配置server.xml:
<Connector port="8080" protocol="HTTP/1.1" compression="on" compressionMinSize="1024" compressableMimeType="text/html,text/xml,text/plain,text/javascript,text/csv,application/javascript,application/json,application/xml" />
-
若独立部署,需配置ngnix:
# gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\.";
-
上一篇: 计数_欧拉 phi 函数
下一篇: 2017CCPC杭州部分题解