webpack打包优化

Posted 2021-03-21 goddess

vue-cli3 webpack优化

. 开启Gzip压缩

vue.config.js

webpack配置

安装包
npm install compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = { 

  configureWebpack: config => {

    // 开发环境不需要gzip
    if (process.env.NODE_ENV !== 'production') return

    config.plugins.push(

      new CompressionWebpackPlugin({

        // 正在匹配需要压缩的文件后缀

        test: /.(js|css|svg|woff|ttf|json|html)$/,

        // 大于10kb的会压缩

        threshold: 10240,

        // 其余配置查看compression-webpack-plugin
      })
    )
  }
}

服务端配置 开启gzip

添加gzip_static on; #静态压缩

 location / {

      root /med/dist;

      index /index.html;

      try_files $uri $uri/ /index.html;

      gzip_static on; #静态压缩

  }

}

.组件按需加载

elementUI

安装

npm install babel-preset-env -D

npm install babel-plugin-component -D

babel.config.js

  plugins: [

    [
      'component',

      {
        'libraryName': 'element-ui',

        'styleLibraryName': 'theme-chalk'

      }

    ]

  ]

main.js 按需引入

import Vue from 'vue';

import {
  Dialog,
  Input,
  Button,
  Table,
  TableColumn,
  Tooltip,
  ...
  Loading,
  Message,
} from 'element-ui';


Vue.use(Dialog);

Vue.use(Input);

Vue.use(Button);

Vue.use(Table);

Vue.use(TableColumn);

Vue.use(Tooltip);

...

Vue.use(Loading.directive);


Vue.prototype.$loading = Loading.service;

Vue.prototype.$message = Message;

路由懒加载

    
    {
          name: 'collectioner_video_list',

          path: 'ownerOrder',

          // component: ownerOrder,

           component: resolve => require(['@/pages/moniterCenter/ownerOrder'], resolve),

           meta: {

                 requiresAuth: true

          }

     }