preface

In the process of cooperating and developing with colleagues, I saw many “SAO operation”. I’ll call it advanced technique because I haven’t used it before!

Vue.extend

In the interaction process, there is a requirement is to click the icon to pop up the related information popup window, and can open multiple at the same time. At this point, you can manually mount the popover component using the vue.extend method.

For example:

// videoDialog videodialog.vue index.js /XXXDialog ··· index.js // videoDialog/index.js import vue from'vue';
import videoDialog from './videoDialog.vue';

const videoDialogConstructor = Vue.extend(videoDialog);

function videoDialogInstance (data) {
    const dialogInstance = new videoDialogConstructor({
        el: document.createElement('div'), data () ({ ... data }) }); document.body.appendChild(dialogInstance.$el);
}

export default function videoDialogDom () {
    Vue.prototype.$videoDom = videoDialogInstance
}

/index.js
import videoDialog from './videoDialog'; Vue.use(videoDialog); // video.vueexport default {
    method: {
        click() {
            this.$video(a); }}}Copy the code

Use relative paths in the CSS

In the Vue project, add an alias to the file path by configuring the Alias property in the WebPack configuration file

// webpack.config.js
resolve: {
    alias: {
        The '@': resolve('src'),
        '@assets': resolve('src/assets'}} // Import Component from can be used in js files'@/component/xxx'// It is used in CSS files'@assets/images/xxx.png'Background-image: url(@assets/images/xxx.png)Copy the code

Using the @assets/images/xxx. PNG syntax in the CSS file will cause an error when referring to the @assets directory. Webpack does not correctly identify the relative path of the resource.

This is because CSS files are processed by CSS-loader, and the path in URL () is treated as an absolute path by CSS-Loader. @assets cannot be found because the alias attribute is not configured in csS-loader.

There are two solutions:

  • incss-loaderIn the configurationaliasHowever, two copies of the same alias are configured, which is redundant.
  • Add the ~ symbol before referring to the path.Background - image: url (~ @ assets/images/XXX. PNG); Webpack resolves paths prefixed with the ~ symbol as dependent modules, and the alias configuration takes effect.

The same method can be used for non-JS files.

Auto-loading module

Some libraries, such as LoDash, are frequently used in projects. Import _ from ‘lodash’ must be referenced every time it is used.

There is one way to automatically load modules: use the ProvidePlugin

new webpack.ProvidePlugin({
  _: 'lodash', / /... }) // Or just use a single method new webpack.providePlugin ({_map: ['lodash'.'map']
  // ...
})
Copy the code

Lodash is automatically loaded whenever _ is treated as an unassigned variable, and _ is assigned by the contents of the lodash output.

When specifying vUE, note that the default attribute of the ES2015 module must be specified for the default export of the module.

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js'.'default']})Copy the code

Injection of common components, common methods, and common directives

In project development, it is common to abstract reusable components and methods into a folder called common, for example. For example,

/common
    /components
        index.js
    /utils
        index.js
    /directives
        index.js
    index.js
Copy the code

In the previous three index.js files, we usually export each type of function, for example:

// components/index,js
export { component1 } from './component1.vue'
export { component2 } from './component2.vue'

// utils/index.js
export { method1 } from './method1.js'
export { method2 } from './method2.js'

// directives/index.js
export { directive1 } from './directive1.js'
export { directive2 } from './directive2.js'
Copy the code

Then, in the fourth index.js file, expose an install method that is injected globally in Install

import * as Directives from './directives';
import * as Components from './components';
import * as Utils from './utils';

export default {
    install: (Vue) => {
        for (let name of Object.keys(Components)) {
            Vue.component(Components[name]['name'], Components[name]);
        }
        for (let name in Directives) {
            Vue.directive(name, Directives[name]);
        }
        Object.assign(Vue.prototype.$utils ? Vue.prototype.$utils: {}, Utils); }};Copy the code

Simply use the vue.use method in the main.js file

// main.js
import common from './common';
Vue.use(common);
Copy the code

Neat and clean!

Gzip acceleration

Finally, the CompressionWebpackPlugin is introduced. It provides gzip compression, optimizes HTTP requests, and speeds up loading.

// vue.config.js
const CompressionPlugin = require("compression-webpack-plugin"); 
configureWebpack:config => {
    if (process.env.NODE_ENV === 'production') {// Enable gzip compression config.plugins.push(new CompressionPlugin({algorithm:'gzip'.test: / \. Js $| \. CSS $/, threshold: 10240, / / to compression of the data of more than 10 k cache:true, // Whether to cache deleteOriginalAssets:false// Do not delete source file}))}}Copy the code

At the end

For more articles, please go to Github, if you like, please click star, which is also a kind of encouragement to the author.