使用vue-cli打包项目时候的一些体积优化方法

1.合理使用运行时依赖和开发依赖

作为开发者,要合理区分哪些插件是项目上线运行后需要的,哪些是用于打包编译,压缩而运行时并不需要的,进行分类安装。开发依赖不会被打包进最终的项目文件,能大大减少项目文件大小。

开发依赖在项目的package.json的devDependencies里,安装时使用的命令行:

npm install xxx --save–dev 
//简写
npm i xxx -D

运行时依赖在package.json的dependencies里,安装命令:

npm install xxx --save
//简写
npm i xxx -S

2.productionSourceMap: false

在config的index.js文件下,找到productionSourceMap设置为false。项目打包后都会经过压缩和混淆等处理,这样的话调试时无法找到报错出现的位置,productionSourceMap是为了找到错误发生位置而设置的,但项目上线后面对的是用户而不是程序员,这个配置就没必要了。划重点,这个选项能很大程度减小项目体积,博主曾经一个项目打包处理后1M+,productionSourceMap设置为false后只有300k+。

3.使用ui框架还要echart时按需引入

ui框架里面会有很多封装好的组件,但很多时候我们需要的可能只有寥寥几个,那这时候就需要按需引入了,下面用element-ui做例子演示按需引入。

  1. 安装插件 babel-plugin-component
  2. .bablerc中配置
    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": [
        "transform-vue-jsx", 
        "transform-runtime",
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

     

  3. src文件夹下创建plugins文件夹,创建element-config.js,写入如下代码
    import Vue from 'vue'
    import {
      Button,
      Select,
      MessageBox
    } from 'element-ui'
    Vue.use(Button)
    Vue.use(Select)
    Vue.use(MessageBox)
    // 动态按需加载
    Vue.prototype.$alert = MessageBox.alert

    然后在main.js中写入import './plugin/element-config'

4.productionGzip: true

在config的index.js中找到productionGzip:设置为true。注意压缩前需要安装依赖CompressionWebpackPlugin。具体操作参考https://www.cnblogs.com/qixidi/p/10390759.html

webpack.prod.conf.js中配置

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|woff|ttf|json|txt|html|ico|svg)(\?.*)?$/i,
      threshold: 10240,
      minRatio: 0.8, // 压缩比小于这个才压缩
      deleteOriginalAssets: true // 仅保留压缩的文件
    })
  )
}

 

5.使用路由懒加载

更多的方法可参考:

https://segmentfault.com/a/1190000019499007#articleHeader4

https://www.jianshu.com/p/11c1d85ccd71

https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/

https://www.jianshu.com/p/171e8e529f35

https://blog.csdn.net/song_de/article/details/81511284

posted @ 2020-04-27 22:11  想学JS的前端  阅读(936)  评论(0编辑  收藏  举报