vue项目中使用CDN加载

最新推荐文章于 2024-04-28 17:23:49 发布

时光在等一个人

最新推荐文章于 2024-04-28 17:23:49 发布

阅读量6.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43878117/article/details/117950072

版权

了解依赖关系

我们可以借助 webpack-bundle-analyzer 将打包后的内容展示为方便交互的树状图，可以很直观的看到有哪些比较大的模块，然后做针对性优化。

yarn add webpack-bundle-analyzer || npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

在这里插入图片描述

CDN引入

<body>
  <div id="app"></div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pikaz-excel-js"></script>
</body>

在 html 中配置的 CDN 引入脚本一定要在 body 内的最底部

在 vue.config.js，添加 externals 让 webpack 不打包 pikaz-excel-js

  configureWebpack: {
	   externals: {
	     'pikaz-excel-js': 'PikazJsExcel'
	   },
    }
   /* pikaz-excel-js 是项目内使用时的组件名称
      pikaz-excel-js的 window 全局名称是 PikazJsExcel
   */

// 对于vue/webpack项目，在webpack.base.conf.js文件中添加
module.exports = {
    externals: {
       'pikaz-excel-js': 'PikazJsExcel'
    },
}

在这里插入图片描述

时光在等一个人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue项目中使用CDN加载

了解依赖关系我们可以借助 webpack-bundle-analyzer 将打包后的内容展示为方便交互的树状图，可以很直观的看到有哪些比较大的模块，然后做针对性优化。yarn add webpack-bundle-analyzer || npm install --save-dev webpack-bundle-analyzerconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
复制链接

扫一扫