一些优化(1)

 

1.去除无用的样式

程序中引入的css中某些类没有用到，但是打包仍会打包进来，我们当然不想看到他，那该怎么做呢?

安装: npm i purgecss-webpack-plugin glob -D 

webpack.config.js中引入

// 去除无用的样式
const glob = require('glob');
const PurgecssWebpackPlugin = require('purgecss-webpack-plugin');

 plugins中设置

plugins: [ new PurgecssWebpackPlugin({
        paths: glob.sync('./src/**/*', {nodir: true})
    }),]

2.DllPlugin提升打包速度

2-1：首先创建webpack-dll-config.js

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

module.exports = {
    entry: ['axios','mockjs','vue-awesome-swiper'],
    output: {
        path: path.resolve('./dll'),/// 打包后文件输出的位置
        filename: 'sx.dll.js',//暴露出的全局变量名
        library: 'sx'    // 打包后被引用的变量名
    },
    plugins: [
        // 动态链接库
        new webpack.DllPlugin({
            path: path.resolve('./dll', 'manifest.json'),
            name:'sx',
        })
    ]
};

 2-2:package.json中配置 "build:dll": "webpack --config webpack.dll.config.js" 

     webpack.config.js配制

 plugins: [
        // 引用对应的动态链接库的manifest.json文件
        // 这样以后再引入react的时候就会优先在json文件里去寻找
        new webpack.DllReferencePlugin({
            manifest: path.resolve('dll', 'manifest.json')
        })
    ]

html文件中引入 <script src="../dll/sx.dll.js"></script> 

3.引入cdn

在html中引入

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>

在webpack配置externals

    externals:{
      'vue':'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ElementUI',
      'echarts': 'echarts',
    },

使用时正常使用