vue + webpack +vue-cli@2.0打包注意事项总结（打包路径、打包后文件大小，组件引入等）

淩亂°似流年 2022-04-22 13:10 161阅读 0赞

以下是用vue-cli@2.0构建的后台管理系统中总结出来的打包注意事项

1，运行已有发布环境打包命令 npm  run  build 以后，的dist文件夹放到本地部署的tomcat中运行，找不到文件

原因是，官方配置文件 config/index.js中配置的 ‘assetsPublicPath‘属性（即打包时，output的文件路径），将build中的assetsPublicPath改成‘./’；

注意，dev中的assetsPublicPath不要改，否则 npm  run  dev会报错

2，vue-cli默认开启eslint检查语法，比较严格

关闭方法：1》 config/index.js   dev对象中，把useEslint的值改为false；

2》文件头部加一个 /\*eslint-disable\*/

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*分割线\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

打包优化

3, 打包速度优化

默认production环境是开启sourceMap的，打包速度会比较慢，可以在config/index.js 的build对象中，把productionSourceMap属性改为false，这样打包出来的文件中不会有map文件，打包速度会提升

4，在build/webpack.base.config.js里配置resolve.modules属性，配置模块库（即 node\_modules）所在的位置，加快打包速度

module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
          resolve('src'),
          resolve('node_modules')
        ],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },

5，loader中配置include和exclude，减少不必要的遍历

include 包括路径，

exclude，排除路径

{
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
            exclude: /node_modules/
    },

6，默认使用uglifyjs-webpack-plugin来压缩文件，但是是单线程压缩，速度很慢，可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间

1》npm i webpack-parallel-uglify-plugin -save-dev

2》build/webpack.prod.conf.js 文件

# **如果报错，可能是版本问题，安装一个低一点的版本** #

//默认配置
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: true
        }),
    
    //改成如下
    
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
    
    new ParallelUglifyPlugin({
          cacheDir: '.cache/',
          uglifyJS:{
            output: {
              comments: false
            },
            compress: {
              warnings: false
            }
          }
        }),

7，用happypack加速代码构建

运行在 Node.js 之上的 Webpack 是单线程模型的，而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建

1》npm i happypack

2》 build/webpack.base.conf.js中，修改为

\-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

8，打包后文件大小

可以把一些不经常变化的文件在index.html文件中用script标签引入，而不是在main.js中用import引入（前者不会被打包到app或者vendor文件中，这样这几个文件大小不会太大），引入后，需要在build/webpack.base.config.js中加入以下配置，告知webpack这些文件不需要打包，例如 axios、element-ui，echarts、g2等插件

externals:{
    
        'axios': 'axios',
    
        'Vue': 'Vue',
        'element-ui': 'ELEMENT',
    
        'G2':'G2',
    
        'DataSet': 'DataSet'
    
      }

9，引入UI框架

为防止引入UI框架后，打包文件过大，可采取两种方法（以element-ui为例）：

1》按需引入，按照官网文档操作即可

import { Button, Select } from 'element-ui';
    
    Vue.component(Button.name, Button);
    Vue.component(Select.name, Select);
    Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
    /* 或写为
     * Vue.use(Button)
     * Vue.use(Select)
     */

注意：按需引入需要在babel里设置plugins,添加component项  同时需要安装npm install babel-plugin-component -save-dev

{
      "presets": [["es2015", { "modules": false }]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

2》在index.html中用script标签引入

详细步骤，1）index.html引入index.css 和 index.js 文件

2）main.js中去掉按需引入或者全部引入的element-ui语句

3） build/webpack.base.config.js中配置externals属性，添加‘element-ui’： ‘ELEMENT’，操作类似方法4

4）main.js中加 Vue.use(ELEMENT,\{size: 'small', zIndex: 1000\})

10，抽离出css等样式文件，

安装 npm install extract-text-webpack-plugin -save-dev

在module里面添加loader，同时在plugins中添加以下代码，在一个环境中，两者必须同时配置，否者会报错

{
    				test: /\.(scss|sass)$/,
    				use: ExtractTextPlugin.extract({
    				  use: ['css-loader', 'sass-loader'],
    				  fallback: 'style-loader'
    				})
    			  // loader: 'style-loader!css-loader!sass-loader'
    			},

new ExtractTextPlugin({
    		  filename: utils.assetsPath('css/[name].[contenthash].css'),
    		  
    		  allChunks: true,
    		}),

11，打包压缩文件

该配置需要服务器同步支持读取gzip格式文件

前端配置如下：

1》config/index.js 中 productionGzip: true, 如果是false，则改为true

2》npm install --save-dev compression-webpack-plugin

12，路由懒加载

当页面过多时，需要在路由配置文件中，配置成路由懒加载

{
        path:'',
        name:'',
        component: resolve => require(['@/views/partner/PartnerListView.vue'],resolve)}
    }

或者

{
        path: '',
        name:'',
        component: resolve => {
            require.ensure(['./home.vue'], () => {
                resolve(require('./home.vue'))
            })
        }
    }