vue webpack打包优化

最新推荐文章于 2024-04-27 08:39:59 发布

Dream_磊

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量294

点赞数

分类专栏： Vue 文章标签： vue es6 vue.js javascript

本文链接：https://blog.csdn.net/qq_37141008/article/details/107193595

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

打包时可以使用

.\node_modules\.bin\vue-cli-service build --report

进行查看项目中文件大小占比，可以根据下图进行针对性的优化。

在这里插入图片描述

项目打包优化

没有使用第三方资源 npm run build 打包的大小
在这里插入图片描述
使用第三方资源 npm run build 打包的大小

使用第三方资源优化项目步骤

(物理打包)项目中在import引入相关的资源，就不会走本身的，转而执行第三方的。
原本的代码什么都不要动，跟这下面步骤走就OK了。

项目打包时在vue.config中
在这里插入图片描述

  configureWebpack: config => {
    config.externals = {
      // 模块名(from后边的名字): 构造函数名称(文件内部提供的全局变量名字)
      vue: 'Vue',
      axios: 'axios',
      'vue-router': 'VueRouter',
      echarts: 'echarts',
      nprogress: 'NProgress'
    }
  }

同时在public–>index.html文件中添加第三方资源网址，有其他需求可以去下面的链接找对应的。
第三方资源网址：https://www.bootcdn.cn/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>topline87</title>
    <!-- -引入第3方网站提供的静态资源- -->
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>