当你开发面向浏览器的库时，你可能会将大部分时间花在该库的测试/演示页面上。以确保将那些你不想打包进库的依赖进行外部化处理。 这也是为了让前端页面性能更优，我们在 App WebView 中针对（如：React、vue） 常用框架相关资源及 Polyfill 进行了预加载处理，你可以在项目中使用特定的资源地址来进行提速，享受无阻塞的缓存资源。
Vite 相关配置
vite是如何处理的，这里我们得说下下面 2中不同处理的插件， ：
方法一 、rollup-plugin-external-globals 配置
我们先来说说第一个包的配置，如果你想打包自动在模板文件中插入 CDN 文件，还需要用到vite-plugin-html ：
import { createHtmlPlugin } from 'vite-plugin-html'
import externalGlobals from "rollup-plugin-external-globals";
export default defineConfig({
plugins: [
// 支持 ejs模板语言，需要在模板加入 <%- injectScript %>
createHtmlPlugin({
template: './index.html',
inject: {
tags:[
{
injectTo: 'body',
tag: 'script',
attrs: {
src: 'https://g.xxx.cn/@app/static/react@17.0.2,react-dom@17.0.2,react-router-dom@6.3.0,immer@9.0.15,axios@0.27.2,js-cookie@3.0.1.min.js',
defer: true
}
},
]
}
})
],
build: {
rollupOptions: {
// 不打包依赖
external: ['react', 'react-dom', 'react-router', 'react-router-dom', 'axios', '@auto/js-cookie'],
plugins: [
// 不打包依赖映射的对象
externalGlobals({
react: 'React',
'react-dom': 'ReactDOM',
'react-router': 'ReactRouter',
'react-router-dom': 'ReactRouterDOM',
axios: 'axios',
'@auto/js-cookie': 'Cookies'
})
]
}
}
方法二、vite-plugin-cdn-import 配置
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
import reactRefresh from '@vitejs/plugin-react-refresh';
const CDN_URL = 'https://g.xxx.cn/@app/static/react@17.0.2,react-dom@17.0.2,react-router-dom@6.3.0,immer@9.0.15,axios@0.27.2,js-cookie@3.0.1.min.js'
export default defineConfig({
plugins: [
importToCDN({
modules: [
{
name: "react",
var: 'React',
path: CDN_URL
},
{
name: "react-dom",
var: 'ReactDOM',
path: CDN_URL
},
{
name: "react-router",
var: 'ReactRouter',
path: CDN_URL
},
{
name: "react-router-dom",
var: 'ReactRouterDOM',
path: CDN_URL
},
{
name: 'axios',
var: 'axios',
path: CDN_URL
},
{
name: '@auto/js-cookie',
var: 'Cookies',
path: CDN_URL
}
],
}),
],
build: {
}
}
不过这种方法存在一个问题，我上面示例中 CDN_URL 同一个地址，这样在打包后模板文件中回出现多个。
不打包依赖文件包前后对比小了不少:
