Nana's Blog

vue项目打包webpack体积优化

一、查看项目打包
webpack有个插件webpack-bundle-analyzer，可以查看项目一共打了多少包，每个包的体积，每个包里面的包情况。
vue-cli 2.0已经集成好了这个插件的配置
我们只需在package.json中添加命令

1
2
3
"scripts": {
   "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}

这样即可查看包大小了。

二、路由懒加载
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了.

1
2
3
4
5
6
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

三、异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染.

1
2
3
components: {
    'my-component': () => import('./my-async-component')
}

四、webpack的external功能
将项目中需要的一些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译。如vue、vue-router、vuex、axios用cdn中的文件代替，而不是直接打包到vendor中.这样在有缓存的情况下，这些资源均走缓存，不必加载。

  1. 在index.html中引入js文件

    1
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

  2. 去掉这些第三方js的import

  3. 配置webpack.base.conf.js的externals选项
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: ["babel-polyfill", "./src/main.js"]
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      externals: {
        react:'React',
        vue: 'Vue',
        jquery:'jQuery'
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        })
      ],
      module: { }
    }

注意：external选项的键值对如果配置错了这些大文件仍旧参与打包，导致优化失败。键，就是用npm install命令装的插件名称。值，就是插件对外提供的那个对象，这个需要打开源码看看。

五、实现elment-ui和echarts的按需加载
因为之前有篇文章说到了echarts的按需加载。这里只涉及elment-ui的按需加载

  • 安装babel-plugin-component

    1
    npm install babel-plugin-component - D

  • 修改.babelrc

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {
      "presets": [
        ["env", {
          "modules": false
        }],
        "es2015","stage-2"
      ],
      "plugins": [
        "transform-runtime",
          [
            "component",
            {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            }
          ]
      ],

  • 在main.js中按需引入

    1
    2
    import { Menu, MenuItem,InputNumber,DatePicker,Popover,Badge,Select,Option } from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css'