vue构建优化

SoapEye 发布于2019-08-29 13:24 / 831人阅读

摘要：第一步新建一个名字自己定义值得关注的是数组资源依赖包，提前编译这里根据自己项目的具体引用情况自行添加资源依赖包，提前编译定义文件生成的位置的部分由的名字替换输出到那个全局变量上和一样即可。

原因

在使用vue开发单页面应用时，随着项目页面的增多，你会发现生产环境的build速度会很慢，同时页面初始的js大小越来越大。当你无法忍受的时候就该优化了。

思路

这方面的优化无非就是异步加载、提取一部分长期不需要更新代码的基础js库。

方案 一、异步加载（懒加载）

可以采用vue-router的路由懒加载点击链接进行学习

二、对于提取基础库

可以学习下DllPlugin和DllReferencePlugin两个插件，同时配合（add-asset-html-webpack-plugin）一起完成提取到自动引入。

第一步：新建一个webpack.dll.config.js(名字自己定义)

值得关注的是lib数组（资源依赖包，提前编译）这里根据自己项目的具体引用情况自行添加

    const webpack = require("webpack");
    const path = require("path");
    const isDebug = process.env.NODE_ENV === "development";
    const outputPath = isDebug ? path.join(__dirname, "../src/common/debug") : path.join(__dirname, "../src/common/dist");
    const fileName = "[name]_[hash].js";
    
    // 资源依赖包，提前编译
    const lib = [
      "vue",
      "vuex",
      "vue-router",
      "axios",
      "body-parser",
      "cookie-parser",
      "weixin-js-sdk",
      "element-ui",
      "vue-scroll"
    ];
    
    const plugin = [
      new webpack.DllPlugin({
        /**
         * path
         * 定义 manifest 文件生成的位置
         * [name]的部分由entry的名字替换
         */
        path: path.join(outputPath, "manifest.json"),
        /**
         * name
         * dll bundle 输出到那个全局变量上
         * 和 output.library 一样即可。
         */
        name: "[name]_[hash]",
        context: __dirname
      }),
      new webpack.optimize.OccurrenceOrderPlugin()
    ];
    
    if (!isDebug) {
      plugin.push(
        // new webpack.DefinePlugin({
        //   "process.env.NODE_ENV": JSON.stringify("production")
        // }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          sourceMap: true
        })
      )
    }
    
    module.exports = {
      devtool: "#source-map",
      entry: {
        lib: lib
      },
      output: {
        path: outputPath,
        filename: fileName,
        /**
         * output.library
         * 将会定义为 window.${output.library}
         * 在这次的例子中，将会定义为`window.vendor_library`
         */
        library: "[name]_[hash]",
        libraryTarget: "umd",
        umdNamedDefine: true
      },
      plugins: plugin
    }

第二步：执行构建

简单的方式是在package.json文件中添加（需要注意的使用的是webpack2）

"dll-production": "NODE_ENV=production webpack --config  build/webpack.dll.config.js --progress",
"dll-test": "NODE_ENV=development webpack --config  build/webpack.dll.config.js --progress",

然后通过npm run dll-production 和 npm run dll-test进行构建
正如NODE_ENV的值一样不同环境引用不同路径下的lib.js
构建后目录如下图

第三步：引入lib.js

#安装add-asset-html-webpack-plugin
$ npm install --save-dev add-asset-html-webpack-plugin

修改开发环境webpack.dev.config.js

#初始化
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin")

在plugins中添加
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(__dirname, "../src/common/debug/manifest.json"))
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "../src/common/debug/lib_*.js") }),

执行npm run dev

修改生产环境webpack.prod.config.js

#初始化
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin")

在plugins中添加
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(__dirname, "../src/common/dist/manifest.json"))
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "../src/common/dist/lib_*.js") }),

执行npm run build(同时与以前的构建速度对比，你会发现节省了很多时间，目前我的项目省了1/3时长)

dll-plugin与CommonsChunkPlugin（webpack4中替换为SplitChunksPlugin）区别

共同点：都是提取公共模块到父模块中，利用缓存来提高访问速度（第一次加载除外）
区别：dll-plugin需要手动去配置和打包公共模块，CommonsChunkPlugin则是每次构建时按照配置打包公共模块。

使用 DllPlugin 将更改不频繁的代码进行多带带编译。这将改善引用程序的编译速度，即使它增加了构建过程的复杂性。
webpack文档也推荐使用dll-plugin进行公共模块的分离。

专线服务超融合服务器 Vue_Vue Vue vue3 学习笔记 (五)——vue3 _vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112582.html

vue首屏加载优化

摘要：为了让事情更简单，允许将组件定义为一个工厂函数，动态地解析组件的定义。只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前首先我们在正常情况下buildshowImg(https://segmentfault.com/img...

Kaede 2019-08-20 17:44 评论0 收藏0
vue-cli2 构建速度优化

摘要：网上流传一些优化配置，有些在新版本的和已经不再需要了，有些是针对的。对于新版本的和，以下简单配置优化后，即可大幅提升构建速度。对于使用 vue-cli 脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，用户不会那么有耐心长时间等着，让你慢慢编译。网上流传...

Cobub 2019-08-06 11:49 评论0 收藏0
vue构建优化

摘要：第一步新建一个名字自己定义值得关注的是数组资源依赖包，提前编译这里根据自己项目的具体引用情况自行添加资源依赖包，提前编译定义文件生成的位置的部分由的名字替换输出到那个全局变量上和一样即可。原因在使用vue开发单页面应用时，随着项目页面的增多，你会发现生产环境的build速度会很慢，同时页面初始的js大小越来越大。当你无法忍受的时候就该优化了。思路这方面的优化无非就是异步加载、提...

nicercode 2019-08-22 11:05 评论0 收藏0
vue构建优化

摘要：第一步新建一个名字自己定义值得关注的是数组资源依赖包，提前编译这里根据自己项目的具体引用情况自行添加资源依赖包，提前编译定义文件生成的位置的部分由的名字替换输出到那个全局变量上和一样即可。原因在使用vue开发单页面应用时，随着项目页面的增多，你会发现生产环境的build速度会很慢，同时页面初始的js大小越来越大。当你无法忍受的时候就该优化了。思路这方面的优化无非就是异步加载、提...

褰辩话 2019-08-05 12:02 评论0 收藏0
前端每周清单第 48 期：Slack Webpack 构建优化，CSS 命名规范与用户追踪，Vue.

摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

sean 2019-08-22 13:57 评论0 收藏0