一、 webpack打包优化目的与方向

打包优化的目的

 1.项目启动速度，和性能
 2.必要的清理数据
 3.减少打包后的体积

2.性能优化的主要方向

1.去重map文件
2.开启CDN加速
3.代码压缩
4.图片压缩
5.公共代码抽离，写在configureWebpack模块中
6.首屏骨架屏优化
7.开启Gzip压缩

二、打包优化（vue.config.js）

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); //代码压缩需要的
const isProduction = process.env.NODE_ENV === "production"; //cdn
const CompressionWebpackPlugin = require("compression-webpack-plugin");//gzip压缩

const { HashedModuleIdsPlugin } = require("webpack");  //cdn

//这个是CDN需要写的
const externals = {
  vue: "Vue",
  "vue-router": "VueRouter",
  vuex: "Vuex",
  vant: "vant",
  axios: "axios",
};
// CDN外链，会插入到index.html中
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: [],
  },
  // 生产环境
  build: {
    css: ["https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"],
    js: [
      "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
      "https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js",
      "https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
      "https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js",
      "https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js",
    ],
  },
};


在这外面写一个module.exports={

}

去除.map文件

    //去除生产环境的
    productionSourceMap: false,//压缩结果原来的一半多

开启CDN加速

//压缩了一半
  chainWebpack: (config) => {
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    config.plugin("html").tap((args) => {
      if (isProduction) {
        args[0].cdn = cdn.build;
      } else {
        args[0].cdn = cdn.dev;
      }
      return args;
    });
  },

需要在html嵌入

     <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.css) { %>
  <link
          href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
          rel="stylesheet"
  />
  <% } %>
  <!-- 使用CDN的CSS文件 -->


  <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->

代码压缩安装插件 npm i -D uglifyjs-webpack-plugin

在configureWbpack中加入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

configureWebpack: (config) => {
    //1.88MB
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"], //移除console
            },
          },
        })
      );
    }
  },

图片压缩安装插件 npm install image-webpack-loader --save-dev

在chainWebpack中新增以下代码
 // ============压缩图片 start============
        config.plugins.delete('prefetch')
        config.module.rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({ bypassOnDebug: true })
// ============压缩图片 end============

公共代码抽离

configureWebpack: (config) => {
    const plugins = [];
    plugins.push(new HashedModuleIdsPlugin());
  },

6.骨架屏

//骨架屏渲染外面需要写的

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入 const path = require('path')

安装npm install vue-skeleton-webpack-plugin index.js

   import Vue from 'vue'
   import home from './index.vue'
   import list from './a.vue'
   export default new Vue({
     components: {
       home,
       list
     },
     template: `
     <div>
      <home id="home" style="display:none"/>
      <list id="list" style="display:none"/>
     </div>
    `
   })

vue.config.js

//configureWebpack模块中写入内容
// 骨架屏渲染
config.plugins.push(new SkeletonWebpackPlugin({
     webpackConfig: {
       entry: {
         app: path.join(__dirname, './src/Skeleton/index.js'),
       },
     },
     minimize: true,
     quiet: true,
     // 如果不设置那么所有的路由都会共享这个骨架屏组件
     router: {
       mode: 'hash',
       // 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id
       routes: [
         { path: '/list', skeletonId: 'home' },
         { path: '/kc', skeletonId: 'list' },
       ]
   }))

开启Gzip压缩 yarn add compression-webpack-plugin@6.1.1 --save-dev 注意的是，服务器上nginx也必须开启gzip才能生效`

configureWebpack: config => {
    // 生产环境相关配置
    if (isProduction) {
        //gzip压缩
        const productionGzipExtensions = ['html', 'js', 'css']
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                deleteOriginalAssets: false // 删除原文件
            })
        )
    }
}

三发布vue项目

首先安装依赖包

下载Xshell 与Xftp
然后在里面安装进入xshell里面安装
//一键安装上面四个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

![4]36D3}86K_$]6G4L`8SBBO.png](p9-juejin.byteimg.com/tos-cn-i-k3…?)

进入输入密码

ssh root@ (服务器地址) //链接服务器之后输入密码
找到usr文件 cd ../ （一般是这样就能看到）
然后用命令创建一个文件夹进入 常用命令

mkdir tan // 创建一个叫tan的空文件夹

cd tan //进入tan文件夹

cd ../ // 后退一个文件夹

ls //查看当前所在文件夹下所有的文件

pwd // 查看当前所在绝对路径

touch text.txt // 创建一个文件

vim text.txt // 打开这个文件
按键 i 键进入编辑模式
按键 esc // 退出这个文件
:wq // 退出这个文件 // 下载nignx

wget nginx.org/download/ng…

下载tar包
wget nginx.org/download/ng… 修改文件名字 mv nginx-1.20.1 nginx3 之后执行tar -xvf nginx-1.20.1.tar.gz
安装nginx cd nginx3 vim conf/nginx.conf 修改端口号

然后修改文件的地址 root 找到文件的路径 7. 修改nginx监听不同端口号 ./configure --prefix=/usr/最初文件名/nginx3 8. 安装nginx make 回车 make install 回车 9. 找到nginx3文件夹 cd sbin/ 回车 cd ../ 回车 10. 安装两个依赖文件 mkdir logs 进入 logs
touch error.log touch sccess.log 11. 进入sbin 然后运行 ./nginx 之后就运行成功了如果报错的话看看这个地址查看报错解决

webpack打包vue优化与linux下nginx发布项目