框架篇-面试题3-vue-cli 脚手架编译后,如果存在过大的 js 文件怎么处理?

最新推荐文章于 2025-10-24 15:21:53 发布

原创最新推荐文章于 2025-10-24 15:21:53 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #less #编程语言 #javascript

本文介绍了处理Vue CLI构建后产生过大JS文件的四种方法：将静态库外部引入、配置externals、路由懒加载、剥离文件单独打包及开启压缩。提供了相关插件安装和配置指导，旨在帮助开发者优化项目性能。

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

方案1: 把一些不常改变的库放到index.html中,通过cdn的方式引入

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

然后找到build/webpack.base.config.js文件,在module.exports={}中添加以下代码

externals: {
  'vue': 'vue',
  'element-ui': 'element',
  'axios': 'axios'
}

方案2: 通过路由的懒加载

export default new VueRouter({
  mode: `history`,
  routes: [
    {
      path: '/',
      name: 'Account',
      compontent: (resolve) => require(['@/components/Account'], resolve),
    },
  ],
});

方案3: 剥离css文件,单独打包安装webpack插件extract-text-webpack-plugin,npm install extract-text-webpack-plguin --save-dev

plugins: [new ExtractTextPlugin('static/css/styles.[contenthash].css')];

方案4: 开启gzip压缩使用compression-webpack-plugin插件进行压缩安装npm install compression-webpack --save-dev

const CompressionPlugin = require('compression-webpack-plugin');
plugins: [
  new CompressionPlugin({
    asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
    algorithm: 'gzip', //算法
    test: new RegExp(
      '\\.(js|css)$' //压缩 js 与 css
    ),
    threshold: 10240, //只处理比这个值大的资源。按字节计算
    minRatio: 0.8, //只有压缩率比这个值小的资源才会被处理
  }),
];

如遇到什么问题,也欢迎小伙伴们下方留言,一起学习探讨~