Laravel框架优化vue前段文件打包 定位大文件

定位前端打包体积过大的原因 使用 webpack-bundle-analyzer

 执行`npm install --save-dev webpack-bundle-analyzer`

修改webpack.mix.js，注意Laravel自带的 webpack-mix 的配置方式与平常的webpack配置略有不同

let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
}).js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .extract(['vue','axios']);

可在packge.json 中添加

"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run production"

执行按需引入

npm install babel-plugin-component -save-dev
npm install babel-preset-es2015
npm install babel-preset-vue
npm install babel --save-dev

在laravel根目录下创建.babelrc文件

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

按需引入element laravel

app.js 按如下修改

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

// Vue.component('example', require('./components/Example.vue'));
// import Hello from './components/Hello.vue'; // 引入Hello 组件
import App from './App.vue';
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import {
  Table, TableColumn, Row, Col,
  Input,
  Button
} from 'element-ui'

[
  Table, TableColumn, Row, Col,
  Input,
  Button
].forEach(Compo => Vue.use(Compo));

// Vue.use(ElementUI);

import router from './router/index.js';

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

此时再去命令行进行打包 执行 npm run product / npm run dev / npm run analyz 进行打包

修改前

image.png

修改后

image.png

使用webpack-bundle-analyzer

image.png