vue webpack 打包优化

1、将 productionSourceMap 设为 false

(1) 在vue.config.js中module.exports写入：

module.exports = {
    productionSourceMap: false //把该项的配置修改为 false，关闭 source map
}

2、图片压缩

先安装依赖：cnpm install image-webpack-loader --save-dev

在vue.config.js中module.exports写入：

module.exports = {
　　productionSourceMap: false,
　　chainWebpack: (config) => {
　　　　// 压缩图片
　　　　config.module
　　　　　　.rule("images")
　　　　　　.use("image-webpack-loader")
　　　　　　.loader("image-webpack-loader")
　　　　　　.options({ bypassOnDebug: true })
　　　　　　.end()
　　},
　　configureWebpack:() => {
　　　　return{
　　　　　　externals:externals
　　　　}
　　},
}

3、cdn配置

     3.1  在public index.html 写入

<script type="text/javascript" src="https://haimihui-static-files.oss-cn-beijing.aliyuncs.com/common/js/vue-router.min.js"></script>
<script type="text/javascript" src="https://haimihui-static-files.oss-cn-beijing.aliyuncs.com/common/js/moment/2.20.1/moment.js"></script>
<script type="text/javascript" src="https://haimihui-static-files.oss-cn-beijing.aliyuncs.com/common/js/moment/2.20.1/zh-cn.js"></script>
<script type="text/javascript" src="https://haimihui-static-files.oss-cn-beijing.aliyuncs.com/common/js/vuex/3.0.1/vuex.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>

　　3.2  在 vue.config.js 添加如下:

　　　　

const externals = {
    'vue-routers':'VueRouter',
    'vuex': 'Vuex',
    'axios':'axios',
    'qs':'Qs',
    'moment':'moment'
}
module.exports = {
　　configureWebpack:() => {
　　　　return{
　　　　　　externals:externals
　　　　}
　　},
}

　　3.3  在src/router.js修改

　　　　去掉import    // import Router from 'vue-router'

　　　　Vue.use(VueRouter);

     3.4  momnet
　　3.4.1 全局  在 main.js 修改

       import moment from "moment";

　　Vue.filter("dateformat", function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {

　　　　if (dataStr) {

　　　　　　return moment(dataStr).format(pattern);

　　　　} else {

　　　　　　return dataStr;

　　　　}

　　});

　　3.4.2  在局部中引用直接   import moment from "moment";

 

  3.5  vuex 

     在  store/index.js

　　

　　import Vuex from 'vuex';

Vue.use(Vuex);

  const store = new Vuex.Store({ .... })

  export default store

3.6  axios

      // import axios from 'axios';// 注释掉

　　// import Qs from 'qs';// 注释掉