vue项目优化，通过externals加载外部CDN资源

最新推荐文章于 2023-05-26 14:52:49 发布

webYin

最新推荐文章于 2023-05-26 14:52:49 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/MYuanFang/article/details/121327436

版权

代码敲完，项目上线，然后就要与优化相遇。

项目时间非常的长加载慢的很，至此开始前端优化之旅

项目根目录运行

 npm install webpack-bundle-analyzer --save-dev

在build/webpack.dev.conf.js中引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    devServer: {
        configureWebpack: {
           plugins: [
               new BundleAnalyzerPlugin()//分析打包文件（大小占比），解开注释打包后自动启动
            ]
        },
    }
}

运行后显示可以看到几个大的js 下面是已经优化过后的截图

优化方式：使用CDN资源

1.在vue.config.js引用需要使用cdn资源的库，再判断环境生产环境则启用cnd

const envBoole = process.env.NODE_ENV === 'development' ? false : true;

const cdn = {
  // 忽略打包的第三方库
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'element-ui': 'ELEMENT',
    'axios': 'axios'
  }
}

module.exports = {
  configureWebpack: {
    //打包忽略第三方库
    externals:envBoole ? cdn.externals : {},
  }
    chainWebpack: config => {
     config.plugin('html').tap(args => {
          args[0].cdn = envBoole //判断生产环境启用cdn
          return args
        })
    }
}

2.在piblic文件夹下的index.html中使用cnd，判断生产环境则启用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>测试</title>
    <script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
    <link rel="icon" type="image/x-icon" href="logo.png" />
    <!-- 使用 CDN 的 css 文件 -->
    <% if (htmlWebpackPlugin.options.cdn) { %>
      <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" >
    <% } %>
</head>

<body style="overflow: auto !important;">
    <noscript>
      <strong>We're sorry but slot doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- 使用 CDN 的 JS 文件 -->
    <% if (htmlWebpackPlugin.options.cdn) { %>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <% } %>
</body>

</html>

webYin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
vue项目优化，通过externals加载外部CDN资源

代码敲完，项目上线，然后就要与优化相遇。项目时间非常的长加载慢的很，至此开始前端优化之旅项目根目录运行npm install webpack-bundle-analyzer --save-dev在build/webpack.dev.conf.js中引入const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = { devS..
复制链接

扫一扫