vite打包配置(静态资源合并打包/清除log/gzip压缩/ENV配置等)

Posted 2023-04-04 shinjie1210

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vite打包配置(静态资源合并打包/清除log/gzip压缩/ENV配置等)相关的知识，希望对你有一定的参考价值。

2022/6/2更新

传了一下本项目代码,文章里写到的基本都有用到,可以clone了看一下

下载地址https://github.com/shinjie1210/vite-config.git----------------------------------------------------------------------------------------------------------------------------

本来准备接在之前的文章

vite+vue3+elementplus教程https://mp.csdn.net/mp_blog/creation/editor/122127233里面继续写的,但是看了下文章内容有点太多了,图多代码长的看的怪累的,

所以就在这里另开一篇记录了,都是一些比较基础的配置,记一下怕自己忘球了

/*各位如果看到有其他vite配置相关文章可以评论区分享一下,私信分享给我也行,大家一起研究学习,感谢*/

未完待续,目前项目(a-project)的vite配置代码如下

1.静态资源合并打包

我们直接就接这上篇文章里vite.config的内容开写啊,

我们把之前的代码贴在这里,

不了解前面内容为什么这么写的的点链接过去看一下就行vite+vue3+elementplus教程(更新到项目部署上线前准备)https://mp.csdn.net/mp_blog/creation/editor/122127233

import 
  defineConfig,
  loadEnv
 from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import 
  ElementPlusResolver
 from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig(
  base: '/aProject/',
  plugins: [vue(),
    AutoImport(
      resolvers: [ElementPlusResolver()],
    ),
    Components(
      resolvers: [ElementPlusResolver()],
    ),
  ]
)

那么书接上回,直接运行vite run build 打包出来的文件非常杂乱,可能就像这样

如果只是写点简单的小demo倒是没什么,正儿八经写项目就不可以了,

所以我们要对静态资源打包做处理,在defineConfig里添加build设置

build: 
    rollupOptions: 
      output: 
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',

那么我们来测试一下效果

npm run build

显然整齐多了,看着也舒服些

2.静态资源文件分拆

注意:

此处用了其他项目文件来举例,

之前用来举例的项目(a-project)没引用什么插件,eleplus也是按需引入的,没办法复现警报场景,

主要在这里介绍用法,静态资源相关写完之后会用回项目(a-project)

现在我们演示的只是个小项目,正常项目里可能会引入非常多的插件来实现功能,

打包是就会出现文件过大的警告,例如我拿来举例子的这个项目

引入了诸如视频\\声纹\\elementplus(非按需自动引入)等组件,在打包时就出现了这种情况

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

超过500k就报警,然后这里有个1mb多的巨无霸在这里看着你= =

这时候我们有两个处理方案:

2.1提高超大静态资源警告门槛

我们先来说简单方案,不是超过500k就报警吗,

那我提高报警限制就好了啊,所以我们把警告限制提高到1500kb

我们在build设置里添加一行代码,像这样

 build:
    chunkSizeWarningLimit: 1500,
//其他配置这里就省略了 减少点重复代码长度

然后我们run build

巨无霸还在,但是不再报警告了

但是这他妈不是掩耳盗铃吗?所以我们要采用第二种方法

2.2超大静态资源拆分

还是老样子,我们在build里的output设置内,添加以下代码

 manualChunks(id) 
          if (id.includes('node_modules')) 
            return id.toString().split('node_modules/')[1].split('/')[0].toString();

再次run build 文件就被拆开了,而不是所有引入的js都糊在一起拼巨无霸了

但是还是有个300多kb的视屏插件和500多kb的eleplus....所以按需引入eleplus和选择合适的插件还是很重要的

3.gzip静态资源压缩

那么大文件也不能放任自流,我们还是可以通过gzip压缩来处理一下的

先安装插件,控制台输入

 npm i vite-plugin-compression -D

然后修改vite.congfig.js页面,引入并在plugin内使用

//引入
import viteCompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
 plugins: [viteCompression(
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
  )],

run build 运行一下,惊喜大大的,大文件压缩效率喜人

4.清除console和debugger

这一步比较简单,在build里添加terserOptions配置即可

terserOptions: 
        compress: 
          drop_console: true,
          drop_debugger: true,
        ,
      ,

5.IE和旧版chrome兼容

首先在这里祝福还在非被迫情况下坚持使用IE和旧版chrome的人____,使用落后产品上瘾吗?

那么兼容主要就是安装一个插件,我们控制台输入

npm i @vitejs/plugin-legacy -D

然后老样子,去vite.config.js页面引入和使用

//引入
import legacyPlugin from '@vitejs/plugin-legacy'
//在plugins配置数组里添加legacy插件
 plugins: [legacyPlugin(
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    )],

那么这样你的代码就可以兼容淘汰产品了

今天就写到这里,太累了写不动了

未完待续,目前项目(a-project)的vite配置代码如下

import 
  defineConfig,
  loadEnv
 from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import viteCompression from 'vite-plugin-compression'
import 
  ElementPlusResolver
 from 'unplugin-vue-components/resolvers'
import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig(
  base: '/aProject/',
  plugins: [vue(),
    AutoImport(
      resolvers: [ElementPlusResolver()],
    ),
    Components(
      resolvers: [ElementPlusResolver()],
    ), viteCompression( //gzip压缩
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    ), legacyPlugin(
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    )
  ],
  build: 
    terserOptions: 
      compress: 
        drop_console: true,
        drop_debugger: true,
      ,
    ,
    // chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
    rollupOptions: 
      output:  //静态资源分类打包
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id)  //静态资源分拆打包
          if (id.includes('node_modules')) 
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          
        
      
    
  
)

Webpack基本打包配置及打包静态资源

1.打包css、html、图片资源开发环境

//resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
//用于打包html资源   为构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');

moudle.exports = {
  //webpack配置
  //入口起点
  entry:'./src/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    //输出路径
    //_dirname node.js的变量，代表当前文件的目录绝对路径
  },
  //loader的配置   例如打包样式资源
  moudle:{
    rules:[
        //详细loader配置
        //不同文件必须配置不同loader
       {
         //匹配哪些文件
         test:/\.css$/,
         //使用哪些loader进行处理 执行顺序：从右到左、从下到上
         use:[
            //创建style标签，将js中的样式资源添加到head中生效
            'style-loader',
            //将css文件变成commonjs模块加入到js中，里面内容是样式字符串。
            'css-loader'
         ]
       },
        {
            test:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                //将less文件编译成css文件   需要下载less-loader和less
                'less-loader'
            ]
        },
        //处理图片资源 处理css中的图片   但默认处理不了html中引入的图片
        {
            test:/\.(jpg|png|gif)$/,
            //使用一个loader   需下载url-loader file-loader
            loader:'url-loader',    一个用loader   多个可以用use
            options:{
                //根据情况配置
                //当发现图片大小小于8kb,就会被base64处理
                //base64优点：减少请求数量，减轻服务器压力
                //缺点：图片体积会更大（文件请求速度更慢）
                limit:8*1024,
//问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                //解析时就会出问题，[object Module]
                //解决：关闭url-loader的es6模块化，使用commonjs解析
                esMoudle:false
            }
        },
        {
            test:/\.html$/,
            //处理html文件的imd图片(负责引入imd,从而能被url-loader进行处理)
            loader：'html-loader'     //解析会报错   原因如上
        }
    ]
  },  
  //plugins的配置 例如打包html资源
  plugins:[
    //详细plugins的配置 
    //html-webpack-plugin
    new HtmlWebpackPlugin({
        //复制'./src/index.html'文件，并自动引入打包输出的所有资源（js/css)
        template:'./src/index.html'
    })  
  ],
  //模式
  mode = 'development'
  //mode = 'production'
}

2.打包其他资源，字体图标等

const { resolve } require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
moudle.export={
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(_dirname,'build')
    },
    moudle:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //打包其他资源（除css/js/html资源以外的其他资源
            {
                //排除css/js/html资源
                exclude:/\.(css|js|html)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
           template:'./src/index.html'
        }) 
    ],
    mode = 'development'
}

3.devServer

开发服务器devServer:用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出启动指令为：npx webpack-dev-server

devServer:{
   contentBase:resolve(_dirname,'build'),
   //启动gzip压缩
   compress:true,
   //端口号
   port:3000,
   //自动打开浏览器
   open:true    
}

4.提取css为单独文件生产环境

①使用插件 new MiniCssExtractPlugin() 提取js中的css为单独文件

②使用MiniCssExtractPlugin.loader 此时可去掉style-loader

{
    test:/\.css$/,
    use:[
        //创建style标签，将js中的样式资源添加到head中生效
        //'style-loader',
        //这个loader取代style-loader。作用：提取js中的css为单独文件
         MiniCssExtractPlugin.loader,
        //将css文件编译到js文件中
        'css-loader',
        //css兼容性处理:postcss--->postcss-loader   postcss-perset-env
        //帮postcss找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
        //设置开发环境 node环境变量   process.env.NODE_ENV = 'development';
        //例如         "browserslist":{           基本兼容全部浏览器
                           "development":[
                               "last 1 chrome version",
                               "last 1 firefox version",
                               "last 1 safari version",
                            ],   
          //默认看是生产环境
                            "production":[
                                ">0.2%",
                                "not dead",
                                "not op_mini all"
                            ]
                        }
        //使用loader的默认配置
        //'postcss-loader'   
        //修改loader的配置
        {
            loader:'postcss-loader',
            options:{
                ident:'postcss',
                plugins:() => [
                    //postcss的插件
                    require('postcss-perset-env')
                ]
            }
        }
    ]    
}
.......
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
        //对输出的css文件进行重命名
        filename:'css/built.css'
    })
]

5.压缩css 用插件 optimize-css-assets-webpack-plugin

const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
plugins:[
  .......
  //压缩css
  new OptimizeCssAssetsWebpackPlugin()
]

6.js语法检查eslint 以及js兼容性处理eslint

moudle:{
    rules:[
        /*语法检查：elsint-loader eslint
       注意：只检查自己写的源代码 第三方库是不用检查的
       设置检查规则：package.json中的eslintConfig中设置~*
       arbnb --> eslint-config-airbnb-base   eslint-plugin-import   eslint*/
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            options:{}
        },
        /*js兼容性处理(将es6以上的语法转化为es6以下的) babel-loader @babel/core        
           1.只能转换基本语法 @babel/presets-env  
           2.转换全部语法   全部js兼容性处理 --> @babel/polyfill(只需在js中引入) 
             缺点：将所有对兼容性代码的处理全部引进来了 增加了代码的体积
           3.需要做兼容性处理的就做：按需加载 ---》 core-js */
        {
          test:/\.js$/,
          exclude:/node_modules/,  
          loader:'babel-loader',
          options:{
              //提示babel做怎样的兼容性处理
              presets:[
                  '@babel/presets-env',
                  {
                      //按需加载
                      useBuiltIns:'usage',
                      //指定corejs版本
                      corejs:{
                          version:3
                      },
                      //指定兼容性做到哪个版本的浏览器
                      targets:{
                          chrome:'60',
                          firefox:'60',
                          ie:'9',
                          ......
                      }
                  }
              ]
          }  
        }    
    ]
}
package.json中
"eslintConfig":{
    "extend":"airbnb-base"   //继承airbnb-base规则检查
}

7.html和js的压缩

//生产环境下会自动压缩代码，不需要管
//压缩html
plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html',
        minify:{
            //移除空格
            collapsewhitespace:true,
            //移除注释
            removeComments:true
        }
    }),
]