Vue 3项目发布后如何隐藏.vue组件文件并压缩chunk文件？

一、禁止他人访问.vue组件文件 #

1. 确保构建过程不输出.vue文件 #

Vue项目生产构建时，正常情况下.vue文件会被编译为JS/CSS资源，不会出现在dist目录中。如果你发现浏览器能看到.vue文件，大概率是构建配置有误或者源码被错误打包：

• 检查vue.config.js（Vue CLI）或vite.config.js（Vite），确保没有将.vue文件作为静态资源复制到输出目录。比如Vite中要避免在public目录存放.vue文件，Vue CLI中检查assetsDir和publicPath配置。
• 确认使用生产环境构建命令：
  • Vue CLI：npm run build
  • Vite：npm run build

2. 服务器层配置禁止访问.vue文件 #

即使误将.vue文件放到了dist目录，也可以通过服务器配置拦截对.vue文件的请求：

• Nginx：在站点配置中添加规则

  location ~* \.vue$ {
      deny all;
      return 403;
  }
  

• Apache：在.htaccess中添加

  <FilesMatch "\.vue$">
      Order Allow,Deny
      Deny from all
  </FilesMatch>
  

• Node.js（Express）：添加中间件拦截

  app.use((req, res, next) => {
      if (req.path.endsWith('.vue')) {
          return res.status(403).send('Forbidden');
      }
      next();
  });
  

二、优化文件压缩 #

Vue 3.2.37配合Vue CLI/Vite的生产构建默认已开启压缩，但可以进一步优化：

1. 启用Gzip/Brotli压缩 #

在服务器端开启Gzip或Brotli压缩，能大幅减小文件体积：

• Nginx开启Gzip：

  gzip on;
  gzip_types text/plain text/css application/javascript application/json;
  gzip_min_length 1024;
  

  若要开启Brotli，需先安装nginx-module-brotli，再配置：

  brotli on;
  brotli_types text/plain text/css application/javascript application/json;
  

• Vite可以通过插件提前生成压缩文件：安装vite-plugin-compression，在vite.config.js中配置：

  import viteCompression from 'vite-plugin-compression';
  
  export default {
      plugins: [
          viteCompression({
              algorithm: 'gzip',
              threshold: 10240 // 文件大小超过10kb才压缩
          })
      ]
  }
  

• Vue CLI可以通过compression-webpack-plugin配置，在vue.config.js中：

  const CompressionPlugin = require('compression-webpack-plugin');
  
  module.exports = {
      configureWebpack: {
          plugins: [
              new CompressionPlugin({
                  test: /\.(js|css)$/,
                  threshold: 10240
              })
          ]
      }
  }
  

2. 启用代码混淆与压缩 #

• Vue CLI生产构建默认开启Terser压缩，可在vue.config.js中调整配置：

  module.exports = {
      configureWebpack: {
          optimization: {
              minimizer: [
                  new require('terser-webpack-plugin')({
                      terserOptions: {
                          compress: {
                              drop_console: true, // 移除console.log
                              drop_debugger: true // 移除debugger
                          }
                      }
                  })
              ]
          }
      }
  }
  

• Vite默认使用esbuild压缩，可在vite.config.js中优化：

  export default {
      build: {
          minify: 'terser', // 可选'esbuild'或'terser'，terser压缩更彻底
          terserOptions: {
              compress: {
                  drop_console: true,
                  drop_debugger: true
              }
          }
      }
  }
  

内容的提问来源于stack exchange，提问作者Hamza abu-othman