https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比...
Describe the bug If the build.rollupOptions.external config option includes a CSS file as a path, a tag matching that path is incorrectly removed from the index.html file and inserted into the JS file, breaking th...
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], }) 当以命令方式运行vite时,vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时,在开发环境下运行都是正常的,但是打包上线的时候就会出现各种问题。如: 假设不配置...
rollup-plugin-visualizer是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个stats.html。 bash 复制代码npm i rollup-plugin-visualizer -D js 复制代码import { visualizer } from'rollup-plugin-visualizer' js 复制代码plugins: [ visualizer({open:true}) ] arduino...
build: { lib: { entry: resolve(__dirname, 'lib/main.js'), name: 'nf-tool', fileName: (format) => `nf-tool.${format}.js` }, sourcemap: true, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue'], ...
import commonjs from '@rollup/commonjs' // 压缩 import {terser} from 'rollup-plugin-terser' export default [ { input:'index.js', // 不想打包进的,我们使用 cdn 引入 external: ['react', { // 对象需要全局名字 ‘react’: 'React' ...
const rollupOptions={ external: ['vue', 'vue-router'], output: { globals: { vue:'Vue'} } }//全量构建const buildAll = async () =>{ await build(defineConfig({ ...baseConfig, build: { rollupOptions, lib: { entry: path.resolve(entryDir,'index.js'), ...
vite build 在库模式下: 我使用了antd 组件库,并用 babel-plugin-import 插件自动载入了组件的样式,编译项我加了external 并制定了antd,但是使用babel-plugin-import 时external ->antd 没生效,编译体积还是很大的,去掉babel-plugin-import后可以看到antd是被排除了的。
${format}.js` }, sourcemap: true, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue'], output: { // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { vue: 'Vue' } } } } }) // 开发模式、生产模式 const project = (url) => { return ...
build: { lib: { entry: resolve(__dirname, 'lib/main.js'), name: 'nf-web-storage', fileName: (format) => `nf-web-storage.${format}.js` }, sourcemap: true, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue', 'nf-tool'], ...