VUE脚手架优化

一、

首先咱们看看经过vuejs脚手架工具生成项目配置文件config/index.js文件，经过看配置咱们能够看到这样一项配置，

productionSourceMap: true

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

 

productionSourceMap: false,

 

二、

下面咱们来看看怎么对图片进行优化。经过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处理。 

 

三、

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'
},

 

四、路由组件进行懒加载 

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

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

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

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

 

// 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

 

六、骨架屏加载