vue项目中使用CDN加载
了解依赖关系我们可以借助 webpack-bundle-analyzer 将打包后的内容展示为方便交互的树状图,可以很直观的看到有哪些比较大的模块,然后做针对性优化。yarn add webpack-bundle-analyzer ||npm install --save-dev webpack-bundle-analyzerconst BundleAnalyzerPlugin = require
·
了解依赖关系
我们可以借助 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'
},
}
更多推荐
已为社区贡献7条内容
所有评论(0)