vue-cli项目优化的办法

提高打包的速度

1. 首先引用插件，其次引用该插件。

// 使用该插件提高了打包速度
const UglifyJsParallelPlugin = require('webpack-parallel-uglify-plugin')
//插件部分
plugins: [new UglifyJsParallelPlugin({
      cacheDir: '.dist/',
      uglifyJS: {
        output: {
          comments: false
        },
        compress: false
      }
    })]

将项目的import Vue等操作通过cdn的模式来进行解决(提高速度）

（打包不出来，不知道是不是cdn那边的问题）

解决项目闪屏

(也就是项目默认是先解析js文件，然后才解析css文件）

//实现防止闪屏
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
{
        test: /\.css$/,
        // 执行顺序是从右到左
        //原先是style.loader
        use: [MiniCssExtractPlugin.loader, "css-loader"],
},
//plugins部分
plugins:[//实现css与js隔离开,各自加载各自的.
    new MiniCssExtractPlugin({
      filename:'static/css/main.css'
    })
 ]

解决css样式的兼容性，引用各种包

npm i postcss-loader postcss postcss-preset-env -D

//webpack.prod.js
{
        test: /\.css$/,
        // 执行顺序是从右到左
        //原先是style.loader
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            //实现css的兼容性
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      }
 //我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度

css文件的压缩。

npm i css-minimizer-webpack-plugin -D

1. 在plugins中激活插件

// css压缩
new CssMinimizerPlugin(),

html和js文件的压缩。(默认自动压缩)

vue-cli的部分配置

1.vue项目的浏览器自动化打开

实现浏览器的自动打开

自动化

1. 首先配置package.json的serve部分 2. 然后配置vue.config.js,添加一个devserver，添加需要的ip地址和端口号，最后让open改为true。

//package.json
"serve": "vue-cli-service serve --open",
//vue.config.js
devServer: {
    //本地服务器的ip地址
    host: '127.0.0.1',
    // 端口号
    port: '8080',
    //实现自动化打开
    open: true
  }