一些优化(1)

1.去除无用的样式

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

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

webpack.config.js中引入

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

plugins中设置

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

2.DllPlugin提升打包速度

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

 1 const path = require('path');
 2 // 引入webpack
 3 const webpack = require('webpack');
 4 
 5 module.exports = {
 6     entry: ['axios','mockjs','vue-awesome-swiper'],
 7     output: {
 8         path: path.resolve('./dll'),/// 打包后文件输出的位置
 9         filename: 'sx.dll.js',//暴露出的全局变量名
10         library: 'sx'    // 打包后被引用的变量名
11     },
12     plugins: [
13         // 动态链接库
14         new webpack.DllPlugin({
15             path: path.resolve('./dll', 'manifest.json'),
16             name:'sx',
17         })
18     ]
19 };

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

webpack.config.js配制

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

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

3.引入cdn

在html中引入

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

在webpack配置externals

1     externals:{
2       'vue':'Vue',
3       'vue-router': 'VueRouter',
4       'element-ui': 'ElementUI',
5       'echarts': 'echarts',
6     },

使用时正常使用