1、

首先我们看看通过vuejs脚手架工具生成项目配置文件config/index.js文件，通过看配置我们可以看到这样一项配置，

productionSourceMap: true

这个配置的作用用于是否生成source map文件。当配置为true时，在打包的过程中会生成source map文件，从而帮助调试代码。但是在我们发布代码的时候是已经调试好的代码，所以生成source map意义不大，于是我们将此处改为false。

 

productionSourceMap: false,

 

2、

下面我们来看看怎么对图片进行优化。通过webpack构建的项目，我们在页面中之所以能够正确的引用到图片，这一切都要依托于webpack中的loader，通过查看build下的webpack.base.conf.js文件我们可以看到里面配置了各种各样的loader，其中有一个url-loader，这个是我们关心的重点。先看一下优化配置部分
 

默认配置：

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
}

修改后的配置：

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[hash:7].[ext]'),
        'image-webpack-loader'
        ]
}

通过修改后的配置和默认配置对比，我们发现修改后的url-loader少了options配置且loader的值为一个数组，而将原本配置在options中的参数以我们常见的url参数的方式配置到了url-loader后面，这个地方实际上是同样的效果。在loader中还有一个image-webpack-loader配置，这个loader就是用于图片优化的核心，用于压缩图片大小。这个地方还有个注意点就是数组中loader的顺序，即最开始的图片处理是由url-loader先处理还是image-webpack-loader处理？url-loader用于将引用的图片正确的引用，而image-webpack-loader用于压缩图片大小，我们设想的是先压缩图片大小，然后再引用。所以配置顺序是url-loader在前，image-webpack-loader在后，因为配置在后面的loader先处理，再交由配置在当前处理的loader之前的loader处理。 

 

3、

vue-cli npm run build 命令打包时默认会把 dependencies 中的依赖统一打包，这就导致打包后的 vendor.js 文件过大，从而使得首次启动时下载 vendor.js 缓慢 

解决方案：像vue、axios、element-ui、iView 这些引入以后基本不会再进行修改的依赖可以通过cdn引入(当然前提是可以接入外网，而且网速不错)，不必要打包到 vendor.js 中。具体写法如下：

 

<!-- 先引入 Vue -->
<!--开发环境-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>-->
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 如果使用element-ui  则引入element-ui， 没找到index.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<!-- 如果使用iView  则引入iView-->
<script type="text/javascript" src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
<!-- 两个UI框架可以同时添加，冲突覆盖很少-->

 

在项目 根目录 build/webpack.base.config.js 中 module.exports 内添加 externals

 

externals: {
    'vue': 'Vue', 
    'axios':'axios',
    'element': 'ELEMENT'
},

 

4、路由组件进行懒加载 

{
    path: "/addGroup",
    name: "addGroup",
    component:resolve=>require(["@/views/addGroup"],resolve)
  }

5、对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩

通过 npm install --save-dev compression-webpack-plugin

对于svg，ico文件以及bmp文件压缩效果达到50%，在productionGzipExtensions: ['js', 'css','svg']设置需要进行压缩的什么格式的文件

 

vue SourceMap卡很久_javascript

vue SourceMap卡很久_vue SourceMap卡很久_02

// https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css','svg'],

View Code

 

6、骨架屏加载