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

itclanCoder

发布于 2020-10-28 17:08:58

8560

发布于 2020-10-28 17:08:58

方案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, //只有压缩率比这个值小的资源才会被处理
  }),
];

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack