跳至主要內容

17.打包及优化

12a2024/10/7大约 2 分钟vuenode.jsvue前端

17.打包及优化

  • 正常情况下直接使用build命令就可以完成打包，打包结果默认在dist文件夹下

17.1 优化

  • 默认打包结果中包含一个大的js文件，里面包含几乎所有的依赖包，会带来加载压力

  • 有下面的几种方法能够帮助优化

    • 压缩成gz格式
    • 使用打包分析插件，精简不必要文件，如：rollup-plugin-visualizer(vite环境)和webpack-bundle-analyzer(webpack环境)
    • 不打包某些包，然后使用cdn将这些包用script引入
    • 分包，将大的文件拆开，比如下列vite的rollup配置项，最终结果将把依赖包拆成不同的小文件，同时加载，减轻加载压力
    output: {
  sourcemap: true,
  chunkFileNames: 'static/js/[name]-[hash].js',
  entryFileNames: 'static/js/[name]-[hash].js',
  assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
  manualChunks(id){
    // id为文件的绝对路径
    if(id.includes('node_modules/.pnpm')){
      let name = id.toString().split('node_modules/.pnpm/')[1].split('/')[0]
      if (name.startsWith('@')) {
        name = "@" + name.substring(1).split('@')[0]
      } else {
        name = name.split('@')[0]
      }
      return name.toString()
    }
  }
}

17.2 多页面打包

  • vue项目默认是一个spa单页面的应用，打包完成后只有一个html文件，如果希望打包出多个页面，可以尝试以下方法
    • 服务端渲染：比如Nuxt.js
    • 预渲染(效果差)
    • 更改打包配置
  • webpack打包：webpack是vue2的默认打包工具，如果希望实现将每个路由打包到一个文件，可以使用prerender-spa-plugin插件
// npm i prerender-spa-plugin -s
// 在webpack.config.js中的plugins选项添加插件
new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  // 路径需要和router中定义的路径一致
  // 生成的文件路径为index.html和about/index.html
  routes: ['/', '/about'],
  renderer: new Renderer({
    renderAfterDocumentEvent: 'render-event'
  })
})

此插件仓库已被存档，自2023年9月之后没有继续更新

  • vite打包：通过对多个html文件进行分别打包，勉强实现多页面入口的方法，对于在一个项目构建多个不同单页面有帮助，实际上在大多数时候这都不是期望达到的多页面效果

    此方法存在许多问题，如果能够选择，尽量使用服务端渲染方案

    • 所有页面都依赖相同的js和css文件
    • 每个页面实际上都是单页应用SPA
    • 使用路由插件管理的链接，无法导航到其他单页应用
    • 跳转其他单页应用需要刷新，状态管理插件无法跨SPA存储状态
    • 配置：通过vite.config.ts中的build选项实现自定义打包
    export default defineConfig({
  // 添加打包配置
  build: {
    // 自定义打包名称和需要的文件名，对预览也有效
    // 默认情况下，打包名称会影响其他相关文件的打包文件名
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'index.html'),
        about: path.resolve(__dirname, 'about/index.html'),
        about1: path.resolve(__dirname, 'about.html'),
      }
    },
  }
})
最近更新