vite+rollup

一、安装依赖： 

1、npm init -y

2、npm install vite -D

3、npm install sass -D

 二、在根目录新建index.html文件

三、修改package.json

 1、人口文件： "main": "index.html",

 2、执行脚本命令："scripts": {
    "dev": "vite"
  }

注意：

在html 中引入外部样式表，scss 有效。如：

<link rel="stylesheet" href="./index.scss">

在html声明内部样式表lang="scss"无效。如

<style lang="scss">
    $var:10px;
    h1{
        font-size: 20px;
    }
</style>

查看rollup 包体积分析：rollup-plugin-visualizer - npm

1、安装rollup-plugin-visualizer

 npm install --save-dev rollup-plugin-visualizer

2、在vite.config.js中：

import { visualizer } from "rollup-plugin-visualizer";

 plugins: [vue(),
        visualizer()
    ],

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import { visualizer } from "rollup-plugin-visualizer";
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),
        visualizer()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src',
                import.meta.url))
        }
    },
    build: {
        target: 'es2015',     
    },
    server: {
        watch: {
            ignored: ['!**/node_modules/your-package-name/**']
        }
    }
})
 

 运行npm run build 之后在根目录下生成一个stats.html文件;

配置cdn的方式引入的外部externals：

在package.json中

"vite-plugin-externals": "^0.5.1"配置如下：

"devDependencies": {
    "@vitejs/plugin-vue": "^3.1.2",
    "vite": "^3.1.8",
     "vite-plugin-externals": "^0.5.1"
  }

vite.config.js中配置如下：

import { fileURLToPath, URL } from 'node:url'
import { viteExternalsPlugin } from 'vite-plugin-externals'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  viteExternalsPlugin({
       vue: 'Vue',
       'vue-router':'VueRouter'
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})